StudyTDD

[TDD] 02 - 테스트 개발 환경구축

TDD

개발환경 구축

버전 정보

1
2
3
"react": "16.9.0",
"react-native": "0.61.1"
"jest": "^24.9.0"

관련 라이브러리

Jest

통합 라이브러리이며, react-native-cli 설치 시 기본 옵션으로 포함되어 설치된다.

Enzyme

에어비엔비에서 개발해서 배포 중인 테스트 라이브러리이다. 리액트 컴포넌트 랜더링 및 탐색하는 기능을 가지고 있다.

Detox

컴포넌트 테스트를 위한 목적이 아니라 End-to-End 테스트를 위해서 개발된 라이브러리이다. 모바일 개발환경을 위해서 개발되었다. 모바일 부분에서는 마땅히 대체할만한 라이브러리가 없어서 Detox로 진행한다.

테스트 코드 구조 변경

강의 환경과 최신버전의 차이가 있어서 그런지 언급되지 않은 에러가 많다. 그래서 최신 버전에 맞게 알아서 환경을 구성했다.

  1. 최초 빌드 시 root 경로에 __test__ 라는 디렉토리로 설정되어있다. 이것을 tests로 변경한다. (강사님이 이 부분에 대해 불만을 가지고 있어 제시한 방법이지만 __tests__로 명시된 디렉토리가 가장 위로 올라오는 장점이 있어서 그냥 두었다. 또한 이 부분에서 testMatch: ~ - 0 ㅡmatches라는 에러가 난다. 후반부 참조)
  2. 코드 구조를 명확하게 하기 위해서 root 경로에 있는 App.js를 src/ 내부로 옮긴다.

Jest 구성

jest.config.js
1
2
3
4
5
6
// jest.config.js
module.exports = {
  preset: 'react-native',
  setupFiles: ['<rootDir>/jest.setup.js'],
  verbose: true,
};

Enzyme 설치

개발 dependencies 설치
1
yarn add enzyme enzyme-adapter-react-16 react-dom --dev
jest.setup.js
1
2
3
4
5
// setup file
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

구성환경 체크(Test)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import 'react-native';
import React from 'react';
import App from '../src/App';

import { shallow } from 'enzyme';
import {Text} from 'react-native';

// Check Jest
describe('Jest', () => {
  it('is it working?', () => {
    const a = 1;
    expect(a + 1).toBe(2);
  });
});

// Check Enzyme
describe('Enzyme', () => {
  it('Is it working?', () => {
    const text = 'some text';
    const wrapper = shallow(<Text>{text}</Text>);
    expect(wrapper.text()).toBe(text);
  });
});

체크 결과

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
❯ yarn test
yarn run v1.19.0
$ jest
 PASS  __tests__/App-test.js (5.028s)
  Jest
    ✓ is it working? (3ms)
  Enzyme
    ✓ Is it working? (2908ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        6.472s
Ran all test suites.
✨  Done in 7.16s.

에러

testMatch: /tests//.[jt]s?(x), **/?(.)+(spec|test).[tj]s?(x) - 0 matches

test가 실행되는 폴더는 default 로 __tests__ 로 지정되어있다. 이러한 구성을 변경하려면 옵션을 주어야하는데 jest.config에서 다음과 같이 명시한다.

"testRegex": "(/tests/.*|(\\.|/)(test))\\.js$"

테스트할 소스의 정규식을 통해서 파일을 탐색하는데 이 부분의 설정을 변경한다.

Your test suite must contain at least one test.

1
2
3
4
__tests__/setup.js
  ● Test suite failed to run

    Your test suite must contain at least one test.

__tests__/setup.js에 enzyme-react 어댑터 설정을 했을 때 발생한다.

에러 로그에 Test Suites: 1 failed, 1 passed, 2 total 와 같이 발생하는 것으로 봐선 __tests__/파일을 하나의 Suites로 인식하고 있고 그 파일 안에는 적어도 한 개 이상의 테스트가 존재해야할 것을 말하는 것 같다.

참조

Configuring Jest · Jest
React Native · Enzyme
Working with React 16.x · Enzyme
로메오의 블로그 :: React Native Jest - props 테스트 Enzyme

공유하기