[Nuxtjs] Ava testing framework

Nuxtjs 에 테스트 코드를 치려고 mocha를 설치하려다가, nuxtjs api문서에 명시 된 ava에 관심을 갖고 설치를 해보았다.

Development Tools - Nuxt.js

여기 명시된 내용대로 “package.json” 수정, test code 작성을 하였는데, 빌드과정에서 계속 에러가 났다. 뭔가 추가 작업이 있어야 될 듯했다.

무엇이 문제인지 정확히 몰라서 한참을 검색하다가 아래와 같은 글을 찾게 되었다.

Nuxt unit + snapshot testing

이 글을 쓴 사람도 mocha 를 시도하다가, ava 를 셋팅한 듯하다.

추가로 필요한 작업을 여기서 찾았다.
우선 필요한 packages 를 설치한다.

yarn add ava @vue/test-utils browser-env require-extension-hooks require-extension-hooks-babel require-extension-hooks-vue --dev

npm install 해도 된다. 그리고 아래와 같이 파일을 하나 만든다.

[./test/setup.js]
const hooks = require('require-extension-hooks')
require('browser-env')()

hooks('vue').plugin('vue').push()
hooks(['vue', 'js']).plugin('babel').push()

이제 package.json에 아래와 같이 추가한다. 위에서 만든 파일을 ava.require에 추가 시킨다.
참고로 그 아래 files는 테스트 코드들을 넣으면 되고, 그 밑에 snapshotDir은 스냅샷 기능을 통해 생성되는 파일이 들어갈 폴더인데 본인이 원하는 곳을 지정하면 된다.

{
  "scripts": {
    "test": "ava"
  },
  "ava": {
    "require": [
      "babel-register",
      "./test/setup.js"
    ],
    "files": [
      "./test/spec/*.js"
    ],
    "snapshotDir": "./test/snapshots"
  },
  "babel": {
    "presets": [
      "es2015"
    ]
  }
}

그리고 위와 같이 package.json 에 추가한다.

이렇게 한뒤에 npm test 로 실행이 됐다. (추가로 production 모드에서 실행이 되야 하는데, 빌드 시작시점에 production 모드에 대한 경고 메세지가 나온다면 아래 처럼 수정해줘서 해결할 수 있다)

“test”: “NODE_ENV=production ava”

자세한 내용은 ava api 문서를 참고하자. ( 이 글 다 쓰고 찾았다 )
아래 링크에 nyc(커버리지) 붙이는 방법도 있다.

avajs/ava

뭔가 돌아가는거 같아서 뿌듯하다.

..Good Luck!