TDD 개발 방법론을 활용한 React Native 앱 개발

TDD 개발 방법론을 활용한 React Native 앱 개발

(15개의 수강평)

127명의 수강생
29,700원
지식공유자 · 박동호
18회 수업 · 총 2시간 16분 수업
평생 무제한 시청
수료증 발급 강좌
수강 난이도 '입문, 초급, 중급'
박동호의 다른 강좌
연관 로드맵
아직 다른 강좌가 없어요 ㅠㅠ
연관 로드맵이 없어요 ㅠㅠ
leh2030 프로필

No tests found, exiting with code 1 에러 leh2030 1달 전

{
  "name": "ReactNativeTDD",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.9.0",
    "react-native": "0.61.1"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.56.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

__tests__ 폴더명 변경 시 yarn run test 를 하게 되면

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

이렇게 테스트가 작성된 폴더를 찾지 못하는 경우가 있습니다.

강의의 진행과 동일하게 했는데도 이렇게 에러가 나네요.

검색 결과

package.json 파일에서

"jest" : {
   "preset": "react-native",
   "testRegex": "(/tests/.*|(\\.|/)(test))\\.js$"
}

이렇게 testRegex 에 대한 추가 설정을 해주고 나면 테스트 폴더가 잡힙니다.

무슨 문제인지 알고 싶습니다.

2
박동조 박 프로필

onCompleted와 onDeleted를 따로 describe로 나누시는 이유가 궁금합니다. 박동조 박 3달 전

안녕하세요. 궁금한 점이 있어 질문 올립니다.

 TodoItem.spec.js 에서

 onCompleted callback 하는 단위 테스트와

 onDeleted callback 하는 단위 테스트를 각각 describe 해서 그룹테스트로 나누시던데, 그 이유가 궁금합니다.

 

beforeEach(() => {
// 테스트 진행 이전 호출
props = {
item: {
text: 'first todo',
done: false
},
index: 0,
onCompleted: jest.fn(),
onDeleted: jest.fn()
}

wrapper = shallow(<TodoItem {...props}></TodoItem>);
wrapper.find('Button').at(0).simulate('press');
wrapper.find('Button').at(1).simulate('press');
// wrapper.find('Button').prop('onPress')();
})

it('should call the onCompleted callback with index', () => {
expect(props.onCompleted).toHaveBeenCalledTimes(1);
expect(props.onCompleted).toHaveBeenCalledWith(props.index);
})

it('should call the onDeleted callback with index', () => {
expect(props.onDeleted).toHaveBeenCalledTimes(1);
expect(props.onDeleted).toHaveBeenCalledWith(props.index);
})

왜 위와 같이 같은 describe 그룹테스트 안에 안두시나요?

개념적으로 제가 부족한건 아닌가 싶어서 질문드렸습니다.

2
박동조 박 프로필

enzyme를 사용하는데 있어서 문제가 있습니다. 박동조 박 4달 전

이전 분이 올려주신 질문과 동일한 에러가 납니다.

원인은 두가지가 있었는데요.

 

1. 첫번째 setup.js 파일을 __test__ 디렉토리에서 테스트 파일로 인식하는듯 하다.

2. 두번째 shallow(<Text>{test}</Text>).text() 의 반환값이 <TouchableText />로 나온다

 

 

첫번째는 setup.js파일을 __test__디렉토리 밖으로 빼줌으로써 해결했구요.

두번째는 shallow(<Text>{test}</Text>).text() 는 잘 동작하지 않지만, shallow(<div>{test}</div >).text() 는 일단 잘 동작하는 걸로 확인 되었습니다.

 

그래서 우선 제가 예상하기론 react-native와 enzyme의 버전 호환성 문제가 아닐까 싶기도 하구요. 또는 jest와의 버전 호환성 문제가 아닐까 생각이 됩니다.

 

아래는 저의 버전 상태입니다.

-------------------

"react": "16.8.3",
"react-native": "0.59.9"
 
 
"@babel/core": "7.5.4",
"@babel/runtime": "7.5.4",
"babel-jest": "24.8.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.55.0",
"react-dom": "^16.8.6",
"react-test-renderer": "16.8.3"
 
 

7
감정한 프로필

enzyme? 감정한 5달 전

  ● Enzyme › is it working?

 

    expect(received).toBe(expected) // Object.is equality

 

    Expected: "some text"

    Received: "<TouchableText />"

received: "text"라고 뜨셨고 그것을 변수화해서 잡아내셨습니다. 애초에 저는 touchable Text라 뜨고 문제가 app.js에 있을거라고 느꼈습니다.

app.js에서 19번째줄 20번째줄 Props에서 에러가 나고있습니다.

/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/

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

const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

코드는 이렇구요. 그다지 문제점을 찾지못해서, 한번 봐주셨으면 합니다. 감사합니다.

13
감정한 프로필

jest - type error 감정한 5달 전

Warning: React.createElement: type is invalid -- expected a st

ring (for built-in components) or a class/function (for composite co

mponents) but got: object.

 

yarn test를 할 때 이런 에러가 뜹니다. test는 원활하게 진행되지만, tdd개발을 배우는것이니 만큼 make it green하고 싶네요. 찾아보니 import export 에러일 영향이 크다고 하나, 특별히 에러가 날 부분은 찾지 못했습니다. 답변 부탁드리겠습니다.

1
감정한 프로필

jest - type error 감정한 5달 전

Warning: React.createElement: type is invalid -- expected a st

ring (for built-in components) or a class/function (for composite co

mponents) but got: object.

yarn test를 할 때 이런 에러가 뜹니다. test는 원활하게 진행되지만, tdd개발을 배우는것이니 만큼 make it green하고 싶네요. 찾아보니 import export 에러일 영향이 크다고 하나, 특별히 에러가 날 부분은 찾지 못했습니다.

4
김영관 김 프로필

영상이 안보여요 아래와 같이요 . 3시간 텀을 두고 다시 접속해도 똑같아요. 김영관 김 5달 전

1
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강좌들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스