Nuxt2+ TS環境で Jest / vue-test-utils メモ（途中）

TypeScript 対応

jest の型を追加

yarn add -D @types/jest@27.0.0

tsconfig.json の types に “jest” を追加

{
  /* 略 */
  "types": [ /* 中略 */ "jest"]
}

＃メモ： jest のバージョンを 28以上にあげると、jest.config.js の testEnvironment に jsdom を指定するには jest-environment-jsdom の追加が必要だったが、jest 28以上はtypescript のバージョンが 4.3 以上だったので、 jest は 27系を維持。

＃typescript のバージョンは 4.2.4 。

types/vue-shim.d.ts の追加（なければ）

これがないとテストファイル内の vue ファイルのimport でこける

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

@nuxtjs/composition-api のバージョンを更新

@nuxtjs/composition-api のバージョンが ^0.32.0 でなんかうまく動かなかったので、最新（ ^0.33.1 ）に更新。
また、この更新によって、いったん unplugin-vue2-script-setup が依存関係から抜けるので、改めて以下を実行

 yarn add -D unplugin-vue2-script-setup

他、つまづいたところ

ググると、jest.config.js の moduleNameMapper に

'@nuxtjs/composition-api': '@nuxtjs/composition-api/lib/entrypoint.js'

の追加が必要、という記事がみつかるが、私の環境では不要だった。

テストファイル作成

provide/inject

＃エラーがでなくなったけどこれ期待どおり動いてるんかな…

import { mount } from '@vue/test-utils'
import ComponentName from '@/components/hoge.vue'
import useHoge, { UseHogeKey } from '@/composables/useHoge'
describe('ComponentName', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(ComponentName, {
      provide: {
        [UseHogeKey as symbol]: useHoge(),
      },
    })
    expect(wrapper.vm).toBeTruthy()
  })
})