11
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Nuxt typescript vue-jestでcannot find module .vue file

Last updated at Posted at 2019-10-12

環境

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を消してみた。

通ったまま。
再起動したらまた動かなくなる

もうわからん。

サンプルプロジェクト

11
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?