環境
package.json
{
"dependencies": {
"@nuxt/typescript-runtime": "^0.2.1",
"nuxt": "^2.10.1"
},
"devDependencies": {
"@nuxt/typescript-build": "^0.3.1",
"@types/jest": "^24.0.18",
"@vue/test-utils": "^1.0.0-beta.29",
"jest": "^24.9.0",
"ts-jest": "^24.1.0",
"vue-jest": "4.0.0-beta.2"
},
"jest": {
"moduleFileExtensions": [
"js",
"ts",
"json",
"vue"
],
"transform": {
"^.+\\.ts$": "ts-jest",
".*\\.(vue)$": "vue-jest"
},
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/$1",
"^~/(.*)$": "<rootDir>/$1"
},
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
"testURL": "http://localhost/"
}
}
tsconfig.jsonは
- nuxt typescriptのガイドにあるものに、
- typesに @types/jestを追加して、
- vue-jestのバージョンを4.0.0-beta.2に変更した(stableだと動かない)
問題
components/HelloWorld.vue
<template>
<h1>HelloWorld</h1>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
})
</script>
__tests__/components/HelloWorld.test.ts
import HelloWorld from '@/components/HelloWorld.vue';
import { mount } from '@vue/test-utils';
describe('HelloWorld', () => {
it('is a Vue component', () => {
const wrapper = mount(HelloWorld);
expect(wrapper.isVueInstance()).toBeTruthy();
});
});
$ npx jest
FAIL __tests__/components/HelloWorld.test.ts
● Test suite failed to run
TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
error TS5060: Option 'paths' cannot be used without specifying '--baseUrl' option.
__tests__/components/HelloWorld.test.ts:1:24 - error TS2307: Cannot find module '@/components/HelloWorld.vue'.
何故かjest上から.vueファイルが認識されていない模様。(tsファイルはimportできてることは確認)
意味が全くわからない。
ググっても誰もerror and resolveを書いていない。
対策
全く意味がわからないが以下のファイルを置いてみた(適当な位置で良い)
vue-shims.d.ts
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
root@808a71578157:/app# npx jest
PASS __tests__/components/HelloWorld.test.ts
PASS __tests__/hoge.test.ts
Test Suites: 2 passed, 2 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 1.799s, estimated 2s
Ran all test suites.
意味がわからないと言ったが、guideに書いてある。(でもいみがわからない)
なんか治った。
試しに vue-shims.d.tsを消してみた。
↓
通ったまま。
再起動したらまた動かなくなる
もうわからん。
サンプルプロジェクト