• 카테고리

    질문 & 답변
  • 세부 분야

    모바일 앱 개발

  • 해결 여부

    미해결

beforeEach 코드가 작동하지 않습니다.

20.11.14 23:39 작성 조회수 199

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

info님의 프로필

info

2021.05.09

저는 연습 차원에서 함수형 컴포넌트로 작성하는데 

저는 작동에 이상이 없어서요 혹시나 도움이 될까해서 소스 코드 올려드립니다.

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