[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
```

```.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
```
<img width="400" alt="スクリーンショット 2021-10-27 22.19.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1986536/6a5e8b9a-a1b1-e9a6-3e37-e84af72c1934.png">

無事成功