inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

AddToDo Component

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

396

js k

작성한 질문수 1

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"
}
}
}
}

javascript react react-native tdd

답변 1

0

info

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

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

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

claw code 에 대해서는 어떻게 생각하시나요?!

0

6

1

비개발자용 리서치나 논문검색 프로젝트 요청

0

6

1

프론트엔드 학습 수준 문의

0

7

1

커밋 명령에 대한 플랜모드 미적용

0

13

2

prd.md 관련

0

13

3

하네스 강의 관련

0

23

2

저 또한 TextInput을 찾지 못합니다..

0

259

1

enzyme 테스트 과정에서 오류가 발생했습니다.

0

272

1

ios 폴더 아래에 build 폴더가 없고 Pods폴더가 있습니다.

2

830

7

detox test

1

537

2

TextInput을 찾지 못합니다.

1

407

3

functional component

1

322

1

cocoapods

1

399

2

테스트 케이스의 작성 범위

1

373

1

detox config 질문

1

394

2

앞으로 작업에 강좌가 도움이 많이 되겠습니다

0

241

0

코드 커버리지 툴은 어떤걸 사용하시나요?

1

551

1

No tests found, exiting with code 1 에러

1

2153

2

onCompleted와 onDeleted를 따로 describe로 나누시는 이유가 궁금합니다.

1

374

2

enzyme를 사용하는데 있어서 문제가 있습니다.

1

406

7

enzyme?

1

761

13

jest - type error

1

308

1

jest - type error

1

463

4

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

1

259

1