Vueプロジェクトでテストを作成したことがなかったので、
Jestというテストフレームワークを試しに使ってみました。＊Jest とは
Facebook社がOSSとして開発を進めている Javascript のテストフレームワークで、依存や設定なしに簡単に始められて高機能なのが特徴です。アサーションやモックの機能も付いています。TypeScriptやReact、Vue、Angular で動作します。
＊参考
＊環境
- Mac OS
- vue 2.9.6
- jest 24.5.0
＊Vueの環境構築インストール
vue-cliをインストールしてからプロジェクトを作成します。今回プロジェクト名は
clientにしているので、任意の名前に変更してvue initのコマンドを実行します。コマンド実行後に質問をされるので、
Set up unit testsでYes、Pick a test runnerでjestを選択します。（その他はEnter もしくは Y で問題ないです）$ npm install vue-cli -g
$ vue init webpack client
? Project name client
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
アプリケーションを起動する場合は下記コマンドを実行して、http://localhost:8080 にアクセスします。
$ cd client
$ npm run dev
作成されたプロジェクトフォルダ配下は下記構成になっています。
testフォルダにe2eとunitフォルダが作成されています。client
├── README.md
├── build
├── config
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ ├── components
│ ├── main.js
│ └── router
├── static
└── test
├── e2e
│ ├── custom-assertions
│ ├── nightwatch.conf.js
│ ├── runner.js
│ └── specs
│ └── test.js
└── unit
├── coverage
├── jest.conf.js
├── setup.js
└── specs
└── HelloWorld.spec.js
ユニットテストとE2Eテストの両方を実行させたい場合は、
npm testで実行できます。これは、package.jsonのscripts:testで設定されています。scriptsにはシェルスクリプトとエイリアスコマンドを指定することができます。<package.json>
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js"
単体テストだけ実行する場合は、プロジェクトフォルダ直下で
npm run unitのコマンドを実行するのですが、このままだと下記のエラーになります。$ npm run unit
> jest --config test/unit/jest.conf.js --coverage
● Deprecation Warning:
Option "mapCoverage" has been removed, as it's no longer necessary.
Please update your configuration.
Configuration Documentation:
https://facebook.github.io/jest/docs/configuration.html
FAIL test/unit/specs/HelloWorld.spec.js
● Test suite failed to run
SecurityError: localStorage is not available for opaque origins
at Window.get localStorage [as localStorage] (node_modules/jsdom/lib/jsdom/browser/Window.js:257:15)
at Array.forEach (<anonymous>)
----------------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
----------------|----------|----------|----------|----------|-------------------|
All files | 0 | 100 | 0 | 0 | |
HelloWorld.vue | 0 | 100 | 0 | 0 | 90 |
----------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 2.654s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client@1.0.0 unit: `jest --config test/unit/jest.conf.js --coverage`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client@1.0.0 unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
testURLを設定していなかったのでURLが空となりエラーになっています。
これは、
jest.conf.jsに下記を追加すると解決します。module.exports = {
...
verbose: true,
testURL: "http://localhost/"
}
追加後に再度実行すると成功します。
成功した場合は、
TestsにPASSと表示されます。失敗した場合はFAILと表示されます。$ npm run unit
> jest --config test/unit/jest.conf.js --coverage
● Deprecation Warning:
Option "mapCoverage" has been removed, as it's no longer necessary.
Please update your configuration.
Configuration Documentation:
https://facebook.github.io/jest/docs/configuration.html
PASS test/unit/specs/HelloWorld.spec.js
HelloWorld.vue
✓ should render correct contents (23ms)
----------------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
----------------|----------|----------|----------|----------|-------------------|
All files | 100 | 100 | 100 | 100 | |
HelloWorld.vue | 100 | 100 | 100 | 100 | |
----------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.442s
Ran all test suites.
＊所感
Vueのプロジェクト作成時にJestを入れてしまえば非常に簡単にテストをすることができたのですが、後から自分で追加する方法は上手くいきませんでした。手順が増えて時間がかかるので、最初から入れてしまうほうが良さそうです。Jestにはモックやアサーション、スナップショットを撮る機能もあるようですので、試してみたいと思います。Sign up here with your email
ConversionConversion EmoticonEmoticon