Zenn
🧱

Nuxt.js & JestのテストコードでTypeScriptを使う際の初期設定メモ

2021/06/15に公開
Nuxt
TypeScript
Jest
frontend
tech

概要

Nuxt.js & JestのテストコードでTypeScriptを使う際の個人的な備忘録です📝

目次

- 各種バージョン・実行環境の確認
- 今回の対応をしなかった場合の実行結果
- 手順1：ライブラリの追加
- 手順2：tsconfig.jsonへの追記
- 手順3：テスト実行確認

各種バージョン・実行環境の確認

  • Nuxt.js
  • TypeScript
  • Jest
$ npm list vue
nuxt-form-validation-sample@1.0.0 /Users/fuqda/private_dev/nuxt-form-validation-sample
├─┬ @nuxtjs/composition-api@0.24.2
│ ├─┬ @nuxt/vue-app@2.15.6
│ │ ├── vue@2.6.12 deduped
│ │ └─┬ vuex@3.6.2
│ │   └── vue@2.6.12 deduped
│ ├─┬ @vue/composition-api@1.0.0-rc.10
│ │ └── vue@2.6.12 deduped
│ └── vue@2.6.12
├─┬ @vue/test-utils@1.2.0
│ └── vue@2.6.12 deduped
├─┬ nuxt@2.15.6
│ └─┬ @nuxt/vue-renderer@2.15.6
│   └── vue@2.6.12 deduped
└─┬ vue-jest@3.0.7
  └── vue@2.6.12 deduped

今回実行するテストコード例

雑にお問い合わせフォームのバリデーションロジックのテストコードを想定しています　👀

test/utils/contact/validation.spec.ts 

import { requiredName } from '@/utils/contact/validation'

describe('requiredName', () => {
  it('undefinedの値の場合', () => {
    expect(requiredName(undefined)).toEqual({ valid: false, message: 'お名前を入力してください' })
  })
})

今回の対応をしなかった場合の実行結果

$ yarn test
yarn run v1.22.10
warning ../package.json: No license field
$ jest
 FAIL  test/utils/contact/validation.spec.ts
  ● Test suite failed to run

    test/utils/contact/validation.spec.ts:3:1 - error TS2593: Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try `npm i --save-dev @types/jest` or `npm i --save-dev @types/mocha` and then add `jest` or `mocha` to the types field in your tsconfig.

    3 describe('requiredName', () => {
      ~~~~~~~~
    test/utils/contact/validation.spec.ts:4:3 - error TS2593: Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i --save-dev @types/jest` or `npm i --save-dev @types/mocha` and then add `jest` or `mocha` to the types field in your tsconfig.

    4   it('undefinedの値の場合', () => {
        ~~
    test/utils/contact/validation.spec.ts:5:5 - error TS2304: Cannot find name 'expect'.

    5     expect(requiredName(undefined)).toEqual({ valid: false, message: 'お名前を入力してください' })
          ~~~~~~

エラー内容

npm i -save-dev @types/jestまたはnpm i -save-dev @types/mocha を試して、jestまたはmocha を tsconfig の types フィールドに追加してください。

以降の項目でエラーを解消するためのライブラリ追加と設定をしていきます💪

手順1：ライブラリの追加

JestでTypeScriptを使う際に必要なライブラリを追加します。

$ yarn add @types/jest

手順2：tsconfig.jsonへの追記

tsconfig.json

先ほど追加した "@types/jest" を "@types:" に追記します。

"types": [
  "@nuxt/types",
  "@nuxtjs/axios",
- "@types/node"
+ "@types/node",
+ "@types/jest"
]

手順3：テスト実行確認

実行出来ることを確認🙆‍♀️

$ yarn test
yarn run v1.22.10
warning ../package.json: No license field
$ jest
 PASS  test/utils/contact/validation.spec.ts
  required
    ✓ undefinedの値の場合 (2 ms)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------|---------|----------|---------|---------|-------------------
All files  |       0 |      100 |       0 |       0 |
 index.vue |       0 |      100 |       0 |       0 | 93-109
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.15 s
Ran all test suites.
✨  Done in 6.20s.

以上です🎉

Discussion