인프런 커뮤니티 질문&답변
작성한 질문수
beforeEach 코드가 작동하지 않습니다.
작성
·
292
0
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"
}
}
}
}
답변 1
0
저는 연습 차원에서 함수형 컴포넌트로 작성하는데
저는 작동에 이상이 없어서요 혹시나 도움이 될까해서 소스 코드 올려드립니다.
import React,{Component, useState} from 'react';
import { Button, TextInput, View } from 'react-native';
const AddToDo = (props) => {
const [text, setText] = useState('');
const onChangeText = (text) => {
setText(text)
}
const onPress = () => {
const { onAdded } = props;
onAdded(text)
}
return (
<View>
<TextInput onChangeText={onChangeText}></TextInput>
<Button title="A" onPress={onPress}></Button>
</View>
)
};
export default AddToDo