[Vue.js] karma로 unit 테스트 시 Can't find variable: WeakMap 에러 해결

Vue.js의 UI 테스팅 메카니즘으로 karma, chai, PhantimJS 조합으로 npm run unit테스트를 많이 돌려왔다. 그러나 최신 es6 javascript에서는 위 조합이 실행이 되지 않는다. 아래와 같이 에러가 난다.

 

$ npm run unit

> kanban-app@1.0.0 unit
> cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

(node:21772) Warning: Accessing non-existent property 'VERSION' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
12 02 2022 17:48:50.162:INFO [karma-server]: Karma v6.3.16 server started at http://localhost:9876/
12 02 2022 17:48:50.166:INFO [launcher]: Launching browsers PhantomJS with concurrency unlimited
12 02 2022 17:48:50.247:INFO [launcher]: Starting browser PhantomJS
12 02 2022 17:48:54.577:INFO [PhantomJS 2.1.1 (Windows 8)]: Connected on socket D4XfASHwulx9WWR1AAAB with id 94848474
PhantomJS 2.1.1 (Windows 8) ERROR
  ReferenceError: Can't find variable: WeakMap
  at E:/Temp/vuejs-master/ch08-10-full/node_modules/chai/chai.js:10602:35

PhantomJS 2.1.1 (Windows 8): Executed 0 of 0 ERROR (0.09 secs / 0 secs)

 

 

이유는 위 PhantomJS가 javascript es2015버전까지만 지원하고 최신 버전에서는 지원이 안되기 때문이다.

 

이 경우에는 테스팅 브라우저를 Chrome으로 바꾸면 된다.

 

개발 프로젝트의 package.json에서 아래 라이브러리를 추가한다.

 

"puppeteer": "^13.3.1",
"karma-chrome-launcher": "^3.1.0",
"chromedriver": "^98.0.0",

 

karma.conf.js 상단에 puppeteer를 로딩하고 CHROME_BIN 변수를 잡아준다.

const puppeteer = require('puppeteer');
process.env.CHROME_BIN = puppeteer.executablePath();

 

중간 module.exports 설정 Object에서 browsers를 ChromeHeadless로 바꾸준다.

module.exports = function karmaConfig (config) {
  config.set({
    // to run in additional browsers:
    // 1. install corresponding karma launcher
    //    http://karma-runner.github.io/0.13/config/browsers.html
    // 2. add it to the `browsers` array below.
    browsers: ['ChromeHeadless'],

 

e2e 테스트를 위해서 nightwatch를 사용한다면 nightwatch.conf.js에 chrome 항목에 chromeOptions를 추가한다.

chrome: {
  desiredCapabilities: {
    browserName: 'chrome',
    javascriptEnabled: true,
    acceptSslCerts: true,
    chromeOptions: {
      "args": ["--no-sandbox", "headless"]
    }
  }
},

 

 

위 사항들 업데이트하고 unit테스트를 실행해보면 잘 수행됨을 알 수 있다.

 

$ npm run unit

> kanban-app@1.0.0 unit
> cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

(node:17456) Warning: Accessing non-existent property 'VERSION' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
12 02 2022 18:05:32.806:INFO [karma-server]: Karma v6.3.16 server started at http://localhost:9876/
12 02 2022 18:05:32.810:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
12 02 2022 18:05:32.829:INFO [launcher]: Starting browser ChromeHeadless
12 02 2022 18:05:34.484:INFO [Chrome Headless 99.0.4844.0 (Windows 10)]: Connected on socket IJY6zQXiSEHQVRBlAAAB with id 7703695

  Auth API 모듈
    login
      성공
        √ token、userId를 받아옴
      실패
        √ 오류 메시지를 받아옴

중략.....

 

 

6) 성공함
     login 액션 Auth.login 성공
     AssertionError: expected false to equal true
    at Context.<anonymous> (webpack:///test/unit/specs/store/actions/login.spec.js:41:32 <- index.js:48320:32)


=============================== Coverage summary ===============================
Statements   : 24.89% ( 57/229 )
Branches     : 26.23% ( 16/61 )
Functions    : 17.58% ( 16/91 )
Lines        : 24.88% ( 54/217 )
================================================================================

 

Nightwatch를 이용한 e2e 명령도 실행해 보면 잘 수행된다.

 

$ npm run e2e

> kanban-app@1.0.0 e2e
> node test/e2e/runner.js

(node:2496) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
Starting selenium server... started - PID:  9936
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

[Login] Test Suite
======================

Running:  ログイン
 √ Element <#app> was visible after 64 milliseconds.
 √ Element <form > .form-actions > button> was present after 21 milliseconds.
 √ Element <#app > .board-view > .board-navigation > .title > h1> was present after 554 milliseconds.
 √ Testing if the URL equals "http://localhost:8080/#/".

OK. 4 assertions passed. (10.893s)