Help us understand the problem. What is going on with this article?

既存のVue.jsのプロジェクトにJestでのテスト環境を構築する

TL;DR

  • VueのプロジェクトにJestによる環境を構築するためにやったことをまとめた
  • Jestについては説明しない

ディレクトリ構成

├── jest.config.js
├── package.json
├── src
│   ├── js
│   │   ├── components
│   │   └── main.js
│   └── sass
├── tests
│   └── unit
└── webpack.config.js

パッケージのインストール

とりあえず基本的なものをインストールします。

$ npm i -D @vue/test-utils jest vue-jest babel-jest

package.jsonにテストを走らせるためのタスクを追加します。

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

Jestの設定をする

jest.config.js
module.exports = {
  moduleFileExtensions: ["js", "jsx", "json", "vue"],
  transform: {
    "^.+\\.vue$": "vue-jest",
    "^.+\\.jsx?$": "babel-jest"
  },
  transformIgnorePatterns: ["node_modules/"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/js/$1"
  },
  testMatch: [
    "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
  ]
};

試してみる

$ npm run test:unit

> vue.build@1.0.0 test:unit /Users/xxx/project/vue-jest-test
> jest

 PASS  tests/unit/example.spec.js
  HelloWorld.vue
    ✓ renders props.msg when passed (15ms)

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

スナップショットテストを導入する

$ npm i -D jest-serializer-vue

jest.config.js

jest.config.jsに以下を追加する。

module.exports = {
  ...
  snapshotSerializers: ["jest-serializer-vue"]
  ...
};

追加後のjest.config.js

module.exports = {
  moduleFileExtensions: ["js", "jsx", "json", "vue"],
  transform: {
    "^.+\\.vue$": "vue-jest",
    "^.+\\.jsx?$": "babel-jest"
  },
  transformIgnorePatterns: ["node_modules/"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/js/$1"
  },
  snapshotSerializers: ["jest-serializer-vue"],
  testMatch: [
    "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
  ]
};

結果

$ npm run test:unit

> vue.build@1.0.0 test:unit /Users/xxx/project/vue-jest-test
> jest

 PASS  tests/unit/SampleComp.spec.js
  SampleComp.vue
    ✓ renders props.text when passed (16ms)

 › 1 snapshot written.
Snapshot Summary
 › 1 snapshot written from 1 test suite.

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

実行すると、tests/unit/__snapshots__以下にsnapshotのファイルが格納される。

参考

Snapshot Testing

カバレッジを表示させたい場合

jest.config.jsに以下を追加する。

module.exports = {
  ...
  "collectCoverage": true,
  "collectCoverageFrom": ["src/js/**/*.{js,vue}"]
  ...
};

追加後のjest.config.js

module.exports = {
  moduleFileExtensions: ["js", "jsx", "json", "vue"],
  transform: {
    "^.+\\.vue$": "vue-jest",
    "^.+\\.jsx?$": "babel-jest"
  },
  transformIgnorePatterns: ["node_modules/"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/js/$1"
  },
  snapshotSerializers: ["jest-serializer-vue"],
  testMatch: [
    "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
  ],
  testURL: "http://localhost/",
  "collectCoverage": true,
  "collectCoverageFrom": ["src/js/**/*.{js,vue}"]
};

エラーが出る場合

Cannot read property 'bindings' of nullとのエラーが出る場合、

$ npm i -D @babel/preset-env

.babelrcを下記の通り修正する。

{ "presets": ["env"] }

{ "presets": ["@babel/preset-env"] }

Upgrade to Babel 7: Cannot read property 'bindings' of null

参考

Vue Test Utils + Jest でVue.jsの単体テストを行う
Configuring Jest

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした