Jestでvueコンポーネントのテストを書く際に発生するエラーの対処方法
概要
JestでVueコンポーネントのテストを実行しようとすると、次のようなエラーが発生してしまう code:shell
$ yarn jest
...
... error TS2307: Cannot find module '~/components/Compoent.vue'
...
環境
依存モジュール
@types/jest@v26.0.19
ts-jest@v26.4.4
vue-jest@v3.0.7
ディレクトリ構成
フロントエンドのソースコードはclientディレクトリ配下に配置
例) client/pages/index.vue, client/components/Component.vue, client/test/components/Component.ts
設定
jest.config.js及びtsconfig.jsonは以下のように設定
code:jest.config.js
module.exports = {
rootDir: "client",
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/$1',
'^~/(.*)$': '<rootDir>/$1',
'^vue$': 'vue/dist/vue.common.js',
},
transform: {
'^.+\\.ts$': 'ts-jest',
'^.+\\.js$': 'babel-jest',
'.*\\.(vue)$': 'vue-jest',
},
collectCoverage: true,
collectCoverageFrom: [
'<rootDir>/components/**/*.vue',
'<rootDir>/pages/**/*.vue',
]
}
code:tsconfig.json
{
"compilerOptions": {
"target": "ES2018",
"module": "ESNext",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"experimentalDecorators": true,
"baseUrl": ".",
"paths": {
"~/*": [
"./client/*"
],
"@/*": [
"./client/*"
]
},
"types": [
"@types/node",
"@types/jest",
"@nuxt/types"
]
},
"exclude": [
"node_modules",
".nuxt",
"dist"
]
}
エラー内容
以下のようにテストコードから.vueファイルをimportする
code:typescript
import Component from "~/components/Component.vue"
test("example", () => {
expect(Component).not.toBeNull()
})
この状態でjestを実行すると、次のようなエラーが発生してしまう (error TS2307: Cannot find module '~/components/Compoent.vue')
code:shell
$ yarn jest
...
... error TS2307: Cannot find module '~/components/Compoent.vue'
...
解消方法
に記載されているように、client/typesディレクトリを用意し、その中にvue-shims.d.tsを作成したらうまくいきました... code:client/types/vue-shims.d.ts
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
参考情報