Vue Jest 에러 및 테스트를 위한 기본 라이브러리 정보

Mar 06, 2020 in javascript, TDD, jest

파일 import 불가

Jest에서 Import를 사용 하는 경우 아래와 같이 에러가 발생한다.

Test suite failed to run

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
    • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
    • If you need a custom transformation specify a "transform" option in your config.
    • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.        

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

D:\GIT 소스코드 저장소\TDD\JEST\vue-jest\vue-jest-start\src\test\helloworld.test.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { mount } from '@vue/test-utils';

1. 해당 라이브러리가 정상적으로 설치 되어 있는지 확인한다.

1) jest
2) vue-jest
3) @babel/core
4) @babel/preset-env
5) babel-jest
6) @vue/test-utils
7) babel-core@^7.0.0-bridge.0 (바벨이 7.0 이상 사용중일때)

2. jest.config.js

package.json 또는 jest.config.js에 아래와 같이 입력 한다.

module.export = {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.vue$": "vue-jest"
    }
}

3. babel.config.js

package.json 또는 babel.config.js에 아래와 같이 입력 한다.

module.exports = {
    presets: [
        [
        '@babel/preset-env',
        {
            targets: {
            node: 'current',
            },
        },
        ],
    ],
};

정리

구글링 결과 Jest에서 Import를 사용하기 위해서는 Babel을 설치해야 하는 듯하다.
그리고 babel 7 이상을 사용 한다면 babel-core@^7.0.0-bridge.0를 설치해 주어야 한다.

Comment and share

JEST 시작

Mar 02, 2020 in javascript, TDD, jest

JEST란

JEST는 페이스북에서 개발한 ‘테스트 프레임워크’ 이다. JEST 이전에는 테스트 라이브러리를 조합해서 사용하였으나 JEST는 이름도 프레임워크인만큼 Test Runner와 Test Mathcher 그리고 Test Mock까지 모두 지원하고 있다.

JEST 설치

아래의 명령어를 통해서 jest를 설치 할수 있다.

1	npm i jest

첫 테스트 코드 작성

test.js라는 파일을 만들고 아래의 코드를 추가한다. JEST에서 테스트 코드 작성은 아래와 같다.

1
2
3

test('테스트 정의', () => {
    // 테스트할 로직 구현
});

test('문자열은 Hello이다.', () => {
    const str = 'Hello'
    expect('Hello').toBe(str);
});

package.json에서 scripts 수정

package.json을 아래와 같이 수정한후에 npm run test라고 실행하면 테스트를 시작한다.

{
    "scripts" : {
        "test": "jest"
    }
}

describe와 it을 이용한 테스트 코드 작성

위에서는 test 함수를 통해서 테스트 코드를 작성하는 방법에 대해서 알아보았다. Jest에서는 이 뿐 아니라 describe와 it을 통해서도 작성 가능하다. describe은 일종의 테스트 그룹이고, it은 작은 단위의 테스트이다. it이 위의 test와 같은 단위이다.

describe('', () => {
    it('', () => {
        // 테스트 코드 작성
    })
});