MofuMofu2
commented
2 years ago shallowMountではUIライブラリのコンポーネントをモックできない。mountする必要がある
vue-test-utilsだとやはりセットアップが面倒。
$ npm run test:unit
> app@0.1.0 test:unit /Users/mofumofu/git/kansou-generator
> vue-cli-service test:unit
ts-jest[versions] (WARN) Version 4.1.6 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=2.7.0 <4.0.0). Please do not report issues in ts-jest if you are using unsupported versions.
PASS tests/unit/example.spec.ts
KansouForms.vue
✓ テストが動くこと (37ms)
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <b-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <KansouForms>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <b-form-group> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <KansouForms>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <b-form-select> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <KansouForms>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <b-form-group> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <KansouForms>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <b-form-input> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <KansouForms>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <b-form-group> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <KansouForms>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <b-form-input> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <KansouForms>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <b-form-group> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <KansouForms>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <b-form-select> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <KansouForms>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <b-form-group> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <KansouForms>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <b-form-textarea> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <KansouForms>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <b-form-group> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <KansouForms>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <b-form-textarea> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <KansouForms>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <b-form-group> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <KansouForms>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <b-form-textarea> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <KansouForms>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <b-form-row> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <KansouForms>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <b-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <KansouForms>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <b-col> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <KansouForms>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Unknown custom element: <b-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <KansouForms>
<Root>
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 3.348s, estimated 4s
Ran all test suites.
概要
vue-test-utilsは便利だが、次の場合はテスト記載しづらい
shallowMountではUIライブラリのコンポーネントをモックできない。mountする必要があるmountだと子コンポーネントの依存全てを意識する必要がある。テスト実行が遅いUIのテストで費用対効果が高いのは単体テストの領域ではなく結合テストの領域。ただカオスプロジェクトにvue-test-utilsで結合テストをねじ込むのは難しく、断念してしまう場合が多い。
また、Vue用のテストツールだとVue → React、jQuery → Vueなど、フロントエンドフレームワークの移行時にテストを再利用できない。画面仕様は変わってはいけないはずなので、専用フレームワークでテストを書き直すのは勿体無いのでは。
CypressはAPIパラメータをモックしつつ、UIのDOM要素にE2Eを書けるそう。 保守でテストねじ込むときはJest（TSのfunction） + Cypressの方が便利ではないかと思うので試す。