Chapter 05

フロントエンドのテスト基盤の整備(Jest)

hibriiiiidge
hibriiiiidge
2020.10.22に更新

それでは次に、簡易的ではありますが、 Nuxt.js と Rails にそれぞれ実装を追加したので、次はテスト基盤を構築していきます。

フロントエンドのテスト基盤の整備

vue-test-utilsJest を用いてフロント側のテストを実装していきます。

# Nuxt.js のコンテナに入ります
$ docker-compose exec frontend /bin/bash
# 例によってバージョンによる挙動の違いをなくすためにバージョンを指定しています
> npm install --save-dev jest@26.4.2 @vue/test-utils@1.1.0 vue-jest@3.0.7 @babel/core@7.11.6 @bable/preset-env@7.11.5 babel-jest@26.3.0 babel-core@bridge

babel-core@bridge については、開発中に以下のエラーが発生していて、

root@bf873add5d89:/app# npm run test

> app@1.0.0 test /app
> jest

 FAIL  spec/logo.spec.js
  ● Test suite failed to run

    Cannot find module 'babel-core'

その対応のためインストールしています。

参考:

Jest のセットアップをしていきます。
package.jsonscripts に以下を追加してください。
そうすることで、 $ npm run test でテストを実行できるようになります。

// package.json
{
 ...
  "scripts": {
    ...
    "test": "jest"
  }
 ...
}

更に、 package.jsonjest ブロックを作成し、以下のように追加します。

{
  // ...
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest",
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    }
  }
}

次に、 babel.config.js を作成し、設定を追加します。

// zenn-app/frontend/babel.config.js

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "useBuiltIns": "usage"
      }
    ]
  ],
  env: {
    test: {
      presets: [
        [
          "@babel/preset-env",
          {
            targets: {
              node: "current"
            }
          }
        ]
      ]
    }
  }
};

参考:

以上で、設定は完了したので、テストファイルを作成します。

Vue Test Utils#テストファイルの配置 に則り作成していきます。

まずは、 frontend 配下に __tests__ ディレクトリを作成します。
次に、 __tests__ 配下に今回テスト対象の pages/index.vue に対応したテストファイルである __tests_/index.spec.js を作成します。

import Index from '../pages/index.vue'

describe('pages/index.vue', () => {
  it('has a default value', () => {
    const defaultData = Index.data()
    // subTitle の初期値をテストする
    expect(defaultData.subTitle).toBe("Zenn is good service!!")
  })
})

__tests_/index.spec.js を作成したら、テストを実行します。

# Nuxt.js のコンテナの中
> npm run test

> app@1.0.0 test /app
> jest

 PASS  spec/index.spec.js (10.988 s)
  pages/index.vue
    ✓ has a default value(empty) (5 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        19.462 s
Ran all test suites.

テストが実行され PASS が表示されれば OK です。