[Nuxtjs] @vue/unit-tests 환경 만들기

간신히 해냈다.

nuxt 프레임워크를 사용해서, @nuxt/unit-tests를 사용해야 할 것 같지만, 공식 문서에 내용이 부족하고, 레퍼런스가 부족하여, @vue/test-utils를 사용하였다.

(nuxt.js의 공식 문서는 빠진 부분이 정말 많은 것을 매번 기능을 추가하면서 느끼는 부분이다. 정말 짜증나게 시간을 잡아먹게 된다.)

 

테스트 코드 실행 성공

방법

참고: https://test-utils.nuxtjs.org/setup

참고: https://heropy.blog/2020/05/20/vue-test-with-jest/

1. 설치

@vue/test-utils로 작업했다.

@babel-core: 7 버전 이상을 사용하라.

yarn add --dev @vue/test-utils@1.2.1

추가 설치 패키지

❌ babel-jest : javascript 코드를 자동으로 컴파일해줌. -> 사용 안 함.

vue-jest: jest.config.js에서 transform에서 사용함. vue 싱글파일컴포넌트를 Jest가 실행가능한 코드로 변환함. JS/JSX 파일을 Jest가 실행할 수 있는 자바스크립트로 컴파일합니다.

@vue/compiler-dom

yarn add --dev vue-jest @vue/compiler-dom jest

2. jest.config.js 파일 설정

프로젝트 루트 경로에 jest.config.js파일을 만들어준다.

module.exports = {
    "transformIgnorePatterns": [
      "node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)"
    ]
}

여기까지 설정하고 실행하면, 다음 에러가 발생한다.   Add @babel/preset-react를 추가하라고 한다. html 태그가 파싱되러고 하니, javascript를 파싱하는 babel이 처리를 못해서 발생시키는 에러이다.(아래는 에러메시지)

Support for the experimental syntax 'jsx' isn't currently enabled (1:1):

 

vue 컴포넌트 파일을 js로 파싱해주는 jest 설정이 필요하다. 최종적으로 jest.config.js는 다음처럼 된다.

module.exports = {
  "transformIgnorePatterns": [
      "node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)"
  ],
  // ⭐️추가
  transform: {
    // process `*.vue` files with `vue-jest`
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
  },
    
  }

 

package.json 추가

"script": {
  "test": "jest"
}

 

3. Babel 설정

vue를 js로 파싱해줘야 한다. 그리고, 노드 런타임 환경에서 실행가능한 코드로 또 파싱해줘야 한다.

yarn add --dev babel-core@^7.0.0-bridge.0

루트 경로에 .babelrc 파일 생성하고 다음을 설정

{
    "env": {
      "test": {
        "presets": [
          [
            "@babel/preset-env",
            {
              "targets": {
                "node": "current"
              }
            }
          ]
        ]
      }
    }
  }

 

4. 테스트 코드 작성

~.text.js 또는 ~.spec.js 로 이름붙은 파일을 테스트한다.

/**
 * @jest-environment jsdom
 */
import { mount } from '@vue/test-utils';
import Badge from './Badge.vue';

// 기본 예시 테스트
const MessageComponent = {
  template: '<p>{{ msg }}</p>',
  props: ['msg']
}

test('displays message', () => {
  // mount() returns a wrapped Vue component we can interact with
  const wrapper = mount(MessageComponent, {
    propsData: {
      msg: 'Hello world'
    }
  })

  // Assert the rendered text of the component
  expect(wrapper.text()).toContain('Hello world')
})

// 실제 컴포넌트 모듈 테스트
test('badge', () => {
  const wrapper = mount(Badge, {propsData: {
          classType: 'oneday'
        }});

  expect(wrapper.text()).toContain('원데이')
})

 

5. 실행

yarn test

or

yarn jest

 

 

🎉 성공.

 

 

참고

https://dev.to/martinnacimiento/configure-jest-in-nuxt-js-36e9

 

 

 

 

 

반쯤 잠자듯 했는데, 테스트 성공되는 거 보고 잠이 다 깨더라..

nuxtjs는 나한테 상 줘라.

 

 

 

에러

@nuxt/test-utils를 사용하면 에러남.

TypeError: (0 , _testUtils.mount) is not a function 12 | 13 | test('기본 테스트', () => { > 14 | const wrapper = mount(MessageComponent);

 

 

에러

Test suite failed to run

● Validation Error:
Test environment jest-environment-jsdom cannot be found. Make sure the testEnvironment configuration option points to an existing node module. Configuration Documentation: https://jestjs.io/docs/configuration

jest-environment-jsdom 사용 버전: jest 28버전은 사용 못 함. 

jest: 27.0.5를 사용하니까 됨.