[Jest] Nuxt.jsでテストコードを実装する

はじめに

Nuxt.js Rails Dockerでのプロジェクトがあり
Jestを使用しテストコードを実装したのでその備忘録
他の参考記事見て、簡単に導入できると思ましたが3時間ぐらいハマりました。

環境

macOS
docker環境

この記事を読んでできること

docker-compose run front yarn testでテストコードが走る
* 今回はsampleページに記載された「Hello World」を検証します

インストール

sample $ docker-compose run front yarn add -D jest vue-jest @vue/test-utils babel-jest

jest.config.jsの作成

プロジェクトのrootディレクトリに作成する

front $ touch jest.config.js

jest.config.js

module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js'
  },
  moduleFileExtensions: ['js', 'vue', 'json'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  collectCoverage: true,
  collectCoverageFrom: [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/**/*.vue'
  ]
}

.babelrcファイルの作成

同階層に作成します

front $ touch .babelrc

{
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "node": "current"
            }
          }
        ]
      ]
    }
  }
}

package.json編集

packege.json

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "yarn lint:js",
    "lint-fix": "eslint --fix --ext .js,.vue .",
    "test": "jest" // 追加
  }

テストコード作成

プロジェクトのrootディレクトリにtestディレクトリを作成

front $ mkdir test

testディレクトリ配下へsample.spec.jsファイルを作成

front $ touch test/sample.spec.js

sample.spec.js

import { mount } from '@vue/test-utils'
import sample from '@/pages/sample'

describe('HelloWorld', () => {
  test('display Hello World', () => {
    const wrapper = mount(sample)
    expect(wrapper.text()).toBe('Hello World')
  })
})

テスト用のvueファイル作成

front $ touch pages/sample.vue

sample.vue

<template>
  <div>
    <p>Hello World</p>
  </div>
</template>

テスト実行

sample $ docker-compose run front yarn test

なぜか失敗...

[vue-test-utils]: window is undefined, vue-test-utils needs to be run in a browser environment.
    You can run the tests in node using jsdom
    See https://vue-test-utils.vuejs.org/guides/#browser-environment for more details.

色々調べた結果、下記方法で解決

sample $ docker-compose run front yarn add -D jsdom
sample $ docker-compose run front yarn add -D jsdom-global

jest.setup.jsファイル作成

jest.setup.js

require('jsdom-global')()

jest.config.jsファイル編集

jest.config.js

module.exports = {
  setupFilesAfterEnv: ['<rootDir>jest.setup.js'], //追加
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js'
  },
  moduleFileExtensions: ['js', 'vue', 'json'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  collectCoverage: true,
  collectCoverageFrom: [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/**/*.vue'
  ]
}

再度テスト実行

sample $ docker-compose run front yarn test

無事成功