Hi :)
僕はWebアプリケーションを開発しています。
フレームワークには、Vue.jsを採用しました。
プロジェクトを始める際にvue-cliを使って初期化しました。
bootstrap4・TypeScriptも使用しています。
しかし……
やっと最近testがかける状態になったので書いていたところ、mochaちゃんに
「は？ ブラウザビルドされたFirebase？ 知らないわ。私はnode派なの。」 1
と言われてしましました。
まあ僕は天才ですから。環境をバッタバッタと、TypeScriptつきjestに切り替えてしまうわけです。
主な流れ
mochaちゃんとchaiちゃんの削除
- @types/mocha
- @vue/cli-plugin-unit-mocha
- @vue/cli-plugin-babel
- chai
$ yarn remove @types/mocha @vue/cli-plugin-unit-mocha @vue/cli-plugin-babel chai
必要なもののインストール
- jest
- ts-jest
- vue-jest
- @types/jest
- babel-core
- @vue/cli-plugin-babel
- jest-css-modules
$ yarn add --dev jest ts-jest vue-jest @types/jest babel-core @vue/cli-plugin-babel jest-css-modules
環境の書き換え
diff --git a/package.json b/package.json
index 810de1c..c9dfdfd 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
- "test:unit": "vue-cli-service test:unit",
+ "test": "jest",
"lint": "vue-cli-service lint"
},
"dependencies": {
@@ -38,14 +37,38 @@
+ "jest": {
+ "moduleFileExtensions": [
+ "ts",
+ "js",
+ "json",
+ "vue",
+ "css",
+ "scss"
+ ],
+ "transform": {
+ ".*\\.(vue)$": "vue-jest",
+ "^.+\\.tsx?$": "ts-jest"
+ },
+ "testURL": "http://localhost/",
+ "testRegex": "(/tests/.+\\.(test|spec))\\.(jsx?|tsx?)$",
+ "moduleNameMapper": {
+ "^@/(.*)$": "<rootDir>/src/$1",
+ "\\.(css|scss)$": "<rootDir>/node_modules/jest-css-modules"
+ }
}
}
テストの書き換え
index c21535f..8b10ac0 100644
--- a/tests/unit/App.spec.ts
+++ b/tests/App.spec.ts
@@ -4,7 +4,8 @@ import VueRouter from 'vue-router'
import store from '@/store'
import { Account } from '@/data/Account'
import { createLocalVue, shallowMount } from '@vue/test-utils'
-import { expect } from 'chai'
+
+import 'jest'
const localVue = createLocalVue()
localVue.use(VueRouter)
@@ -24,15 +25,15 @@ describe('App.vue', () => {
it('shows 「ログイン」 and 「アカウント登録」 before logging in', () => {
const wrapper = shallowMount(App, { localVue, router })
- expect(wrapper.find('#to-login').text()).to.contain('ログイン')
- expect(wrapper.find('#to-signup').text()).to.contain('アカウント登録')
+ expect(wrapper.find('#to-login').text()).toBe('ログイン')
+ expect(wrapper.find('#to-signup').text()).toBe('アカウント登録')
})
it("doesn't show 「マイページ」 and 「ログアウト」 before logging in", () => {
const wrapper = shallowMount(App, { localVue, router })
- expect(() => wrapper.find('#to-mypage').text()).to.throw('find did not return')
- expect(() => wrapper.find('#to-logout').text()).to.throw('find did not return')
+ expect(() => wrapper.find('#to-mypage').text()).toThrow('find did not return')
+ expect(() => wrapper.find('#to-logout').text()).toThrow('find did not return')
})
// Using store to test store directly
@@ -40,8 +41,8 @@ describe('App.vue', () => {
const wrapper = shallowMount(App, { localVue, router })
store.commit('login', { account })
- expect(() => wrapper.find('#to-login').text()).to.throw('find did not return')
- expect(() => wrapper.find('#to-signup').text()).to.throw('find did not return')
+ expect(() => wrapper.find('#to-login').text()).toThrow('find did not return')
+ expect(() => wrapper.find('#to-signup').text()).toThrow('find did not return')
})
it('shows 「マイページ」, informations on MyPage, and 「ログアウト」 after logged in', () => {
@@ -52,23 +53,23 @@ describe('App.vue', () => {
})
store.commit('login', { account })
- expect(wrapper.find('#to-mypage').text()).to.contain('マイページ')
- expect(wrapper.find('#to-logout').text()).to.contain('ログアウト')
+ expect(wrapper.find('#to-mypage').text()).toBe('マイページ')
+ expect(wrapper.find('#to-logout').text()).toBe('ログアウト')
wrapper.find('#to-mypage').trigger('click')
const info = wrapper
.find('#container')
.find('#mypage')
.find('#informations')
- expect(info.find('#email').text()).to.contain('なし')
- expect(info.find('#name').text()).to.contain(account.name)
- expect(info.find('#screenName').text()).to.contain(account.screenName)
- expect(info.find('#profile').text()).to.contain(account.profile)
+ expect(info.find('#email').text()).toBe('なし')
+ expect(info.find('#name').text()).toBe(account.name)
+ expect(info.find('#screenName').text()).toBe(account.screenName)
+ expect(info.find('#profile').text()).toBe(account.profile)
})
it("doesn't show 「ログアウト」 after logged out", () => {
const wrapper = shallowMount(App, { localVue, router })
store.commit('logout', {})
- expect(() => wrapper.find('#to-logout').text()).to.throw('find did not return')
+ expect(() => wrapper.find('#to-logout').text()).toThrow('find did not return')
})
})
テストの実行
$ yarn test
yarn run v1.12.1
$ jest
FAIL tests/App.spec.ts
App.vue
✓ shows 「ログイン」 and 「アカウント登録」 before logging in (61ms)
✓ doesn't show 「マイページ」 and 「ログアウト」 before logging in (10ms)
✓ doesn't show 「ログイン」 and 「アカウント登録」 after logged in (11ms)
✕ shows 「マイページ」, informations on MyPage, and 「ログアウト」 after logged in (24ms)
✓ doesn't show 「ログアウト」 after logged out (10ms)
● App.vue › shows 「マイページ」, informations on MyPage, and 「ログアウト」 after logged in
expect(received).toBe(expected) // Object.is equality
Expected: "なし"
Received: "email: なし"
62 | .find('#mypage')
63 | .find('#informations')
> 64 | expect(info.find('#email').text()).toBe('なし')
| ^
65 | expect(info.find('#name').text()).toBe(account.name)
66 | expect(info.find('#screenName').text()).toBe(account.screenName)
67 | expect(info.find('#profile').text()).toBe(account.profile)
at Object.<anonymous> (tests/App.spec.ts:64:40)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 4 passed, 5 total
Snapshots: 0 total
Time: 2.732s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
はい通った！
おわり 
-
mochaがテストにnode.jsを使うせいで、ブラウザビルド版のFirebaseのコードがうまくコンパイルできない。実装間の微妙な差異による。 ↩