Vue.js 프로젝트를 mocha & chai로 만들었지만 중간에서 jest로 전환

Hi :)

저는 웹 응용 프로그램을 개발 중입니다.
프레임 워크는 Vue.js를 채택했습니다.
프로젝트를 시작할 때 vue-cli를 사용하여 초기화했습니다.

bootstrap4 · TypeScript도 사용하고 있습니다.

그러나…
마침내 최근에 테스트를 거는 상태가되었으므로 쓰고 있었는데 mocha가

"하? 브라우저 빌드 된 Firebase? 모르겠어. 나는 node파인거야."1

라고 말해졌습니다.

글쎄, 나는 천재이기 때문에. 환경을 메뚜기 메뚜기와, TypeScript 첨부 jest로 전환해 버리는 것입니다.

주요 흐름

TypeScript와 함께 사용 | Vue Test Utils

jest 테스트에서 css, scss, less 얽힘으로 SyntaxError가 발생하는 경우의 해결 방법 - Qiita

그 외, 섬세한 녀석

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 코드를 잘 컴파일 할 수 없습니다. 구현 간의 미묘한 차이로 인해. ↩