RN(ReactNative) TDD 설정 및 TODO 앱 만들기

react-native CLI 로 프로젝트를 생성하면

테스트를 위해서 기본적으로 jest 와 react-test-renderer 가 설치 됩니다

 

거기에 unit 이나 컴포넌트 테스트를 위해서 enzyme 또는 react-native-testing-library 를 추가해서 사용하고

e2e 테스트용으로는 detox 를 설치해서 사용합니다

 

유닛 테스트를 더 편하게

# 테스트를 위해서 enzyme 또는 react-native-testing-library 를 설치합니다
npm install --save-dev @testing-library/react-native

# 별도의 matcher 를 사용하려면 추가해주세요
npm install --save-dev @testing-library/jest-native

 

react-native-testing-library 도 jest 를 사용하니 jest 설정을 추가해줍니다

# package.json 에 설정 추가

"jest": {
    "preset": "react-native",
    "setupFilesAfterEnv": [
      "@testing-library/jest-native/extend-expect"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!(@react-native|react-native|react-native-vector-icons)/).*/"
    ],
    "transform": {
      "^.+\\.jsx$": "babel-jest"
    }
  }

* react-native-vector-icons 를 사용하고 있어서  transformIgnorePatterns 에 추가 해주었습니다

 

TDD 구조를 만들어봅니다

$PROJECT_ROOT
├── App.js        # Entry point
├── __tests__     # Test
└── src
    ├── screens    # Screen components
    ├── components # UI components
    ├── utils      # Custom hooks and helpers
    ├── services   # external API connnet
    └── assets     # Image files

 

__tests__ 폴더에 App-test.js 파일 생성하고 테스트 코드 추가

import 'react-native';
import React from 'react';
import {render, screen} from '@testing-library/react-native';

import App from '../src/App';

let props;
let component;

function getAppComponent(temprops) {
  return <App {...temprops} />;
}

describe('App render', () => {
  beforeEach(() => {
    props = {};
    component = render(getAppComponent(props));
  });

  it('snapshot test', () => {
    const snapshot = component.toJSON();
    expect(snapshot).toMatchSnapshot();
  });

  it('should render title Todo TDD', () => {
    const title = screen.getByText('Todo TDD');
    expect(title).toBeTruthy();
  });

  it('should render AddTask', () => {
    const element = screen.getByPlaceholderText('+ Add a Task');
    expect(element).toBeTruthy();
  });

  it('should render TaskList', () => {
    const element = screen.getByText('Learn React Native');
    expect(element).toBeTruthy();
  });
});

npm test 로 테스트를 실행시키면 당연히 4개 다 실패

 

이제 코드 작성 합니다

index.js

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

src/App.js 생성

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

테스트 실행하면 4개 중에 1개 성공 3개 실패

snapshot 테스트만 성공입니다

ReactNative TDD

테스트 조건에 맞게 다시 수정합니다

App.js

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Todo TDD</Text>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

다시 테스트 결과 2개 성공 2개 실패

또 다시 App.js 수정

import React from 'react';
import {StyleSheet, Text, TextInput, View} from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Todo TDD</Text>
      <TextInput placeholder="+ Add a Task" />
      <Text>Learn React Native</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

 

# npm test 실행
npm test -- -u

App-test.js

전부 Passed

 

이러면 TDD Todo APP 이 만들어진게 아니라

이제 시작입니다