TDD 개발 방법론을 활용한 React Native 앱 개발 대시보드

AddToDo Component 강의의 AddToDo.spec.js 코드를 동작시켜보니 "Cannot read propery 'onAdded' of undefined" 라는 에러가 뜨면서 빌드에 실패합니다.  아래가 코드입니다. describe('Interaction', ()=> { let wrapper; let props; const text = "some ToDo" beforeEach(()=> { props = { onAdded: jest.fn() } wrapper = shallow(<AddToDo {...props}></AddToDo>) wrapper.find('TextInput').simulate('changeText', text) wrapper.find('Button').prop('onPress')(); }) it('should call the onAdded callback with input text', ()=>{ expect(props.onAdded).toHaveBeenCalledTimes(1); expect(props.onAdded).toHaveBeenCalledWith(text); }) }) beforeEach 콜백함수가 동작하지 않으면서 onAdded 변수가 초기화되지 않는 것으로 보이는데 구글링해도 답을 찾기 어렵네요ㅜㅜ beforeEach를 작성하기 이전의 TDD 코드들은 모두 동작하였습니다. 정 해결책을 찾지 못하게 된다면 TDD 부분을 넘어가고 컴포넌트와 앱 부분만 진행하더라도 무리는 없을까요? 혹시 모르니 package.json 코드도 첨부하겠습니다. { "name": "TDDRN", "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.13.1", "react-native": "0.63.3" }, "devDependencies": { "@babel/core": "^7.12.3", "@babel/runtime": "^7.12.5", "@react-native-community/eslint-config": "^2.0.0", "babel-jest": "^26.6.3", "detox": "^17.11.4", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.5", "eslint": "^7.13.0", "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.64.0", "react-dom": "^17.0.1", "react-test-renderer": "16.13.1" }, "jest": { "preset": "react-native", "setupFiles": [ "./tests/setup.js" ] }, "detox": { "test-runner":"jest", "configurations": { "ios.sim": { "binaryPath": "bin/Exponent.app", "type": "ios.simulator", "name": "iPhone 7" } } } }

윗 분 질문이 동일하게 있으나 답변이 없어 다시 질문 올립니다!

(사진)

Pods라는 폴더가 있고 build폴더가 어디에도 보이지 않습니다.. 문서에도 예시로 아래와 같이 되어있는데요 .. 폴더가 없고 검색해봐도 방법을 찾지 못하겠네요 ...   "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/YourAppName.app",

강사님 질문이 있습니다. detox 버전 업 때문인지 detox init 당시 강사님과 다른 설정이 나오고, detox test 전에 detox build를 하지 않으면 안됩니다... 버전 업 이후에는 test 전 반드시 build를 해야 하는건가요??

텍스트 인풋을 찾지 못하고 실패합니다. 이유를 잘 모르겠습니다.

wrapper.find("AddToDo") 에서 AddToDo 컴퍼넌트를 클래스로 만들 경우에만 동작하고 functional component로 만들 경우에는 아무 객체도 받지 못합니다. functional component로 테스팅할수 있는 방법이 있나요?

처음 react-native-cli를 npm으로 설치하고 프로젝트를 시작했을 때, React-Native: Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template 라는 에러가 발생했는데, 커맨드 라인에서 sudo gem install cocoapods를 실행하고 sudo xcode-select --switch /Applications/Xcode.app 를 실행했더니 정상적으로 설치가 되었습니다. 어떤게 문제였는지 궁금합니다. 그리고 프로젝트 폴더로 들어가서 react-native run-ios는 실행이 안되었고 npx react-native run-ios는 실행이 되는 부분도 궁금합니다.

안녕하세요 선배님 좀 어리석은 질문일수도 있습니다만, TDD 방법론으로 코드를 작성하는 경우 모든 코드에 대해 테스트 코드가 작성되는 것이 원칙인것 같습니다. 하지만 한국에서의 전통적인 SI 프로젝트는 기간과 범위가 매우 타이트하게 정해져 있기 때문에 TDD 방법론을 원칙에 따라 적용하기에는 한계가 있는 것도 사실입니다.  만일 모든 코드에 대한 테스트 작성이 어려운 상황이라면, 어떤 종류의 코드 또는 함수를 작성할 때는 테스트 코드를 작성하는게 좋다 라고 할만한 범위에 대한 가이드라인 같은게 있는지 궁금합니다.

안녕하세요 강의 잘 보고 있습니다. detox의 package.json에서 binaryPath 설정단계에 제 폴더에는 ios/build 폴더가 없어서 질문합니다. 이런 경우에는 어떻게 해야 하나요??

늘 생각만하고 책을봐도 해결하지못한 부분들이 해결되어앞으로 잘 사용 할것같습니다 마지막 강좌에서 말씀하셨듯이 리덕스, 웹서비스 등등 중급강좌가 시급합니다 언른 시작해주세요!ㅎㅎ 개인적으론 파이어베이스 연동도 설명이 되면 좋겠습니다 그리고 간단하게라도 실제앱 개발처럼 작업과정을 좀 알려주시면 하는 바람이있습니다 큰 도움 받았습니다 고맙습니다

안녕하세요? 강좌 재미있게 잘 봤습니다. 저는 자바 기반으로는 유닛 테스트를 좀 해봤습니다. 제가 전에 자바로 테스팅 할 때는 코드커버리지 도구를 이용해서 전체 코드 중에 얼마나 테스트를 했는지 확인할 수 있었는데, 강사님은 현재 코드커버리지 도구를 사용중이신지 궁금하고 사용 중이시라면 어떤걸 이용하고 계신지 궁금합니다. 그리고 it(), expect(), 등등 테스트에 사용되는 도구들이 갖고 있는 기본 api 들에대해서 어떤 역할을 하는 것들인지도 쫌 설명이 있었으면 좋았을 것 같습니다. 지금 상태라면 각 함수들의 용도나 기능은 모른채로 강사님의 코드를 따라하기식으로 밖에는 테스트 케이스를 작성할 수 없을 것 같아요. 감사합니다~

{ "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 에 대한 추가 설정을 해주고 나면 테스트 폴더가 잡힙니다. 무슨 문제인지 알고 싶습니다.

안녕하세요. 궁금한 점이 있어 질문 올립니다.  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 그룹테스트 안에 안두시나요? 개념적으로 제가 부족한건 아닌가 싶어서 질문드렸습니다.

이전 분이 올려주신 질문과 동일한 에러가 납니다. 원인은 두가지가 있었는데요.   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"    

  ● 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, }, }); 코드는 이렇구요. 그다지 문제점을 찾지못해서, 한번 봐주셨으면 합니다. 감사합니다.

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 에러일 영향이 크다고 하나, 특별히 에러가 날 부분은 찾지 못했습니다. 답변 부탁드리겠습니다.

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 에러일 영향이 크다고 하나, 특별히 에러가 날 부분은 찾지 못했습니다.

(사진)