enzyme?

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

Enzyme 설치/설정 및 동작확인

작성

467

● 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,
},
});

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

javascript tdd react react-native

답변 13

찰쓰

한참을 삽질 하고 알아낸거라고는

<Text></Text>는 계속 Received: "<TouchableText />"으로 인식되어서 안되고

위와같이 <div></div>로 했을 시는 잘되네요.

이유는.. 아직 모르겠습니다

찰쓰

일단 setup.js를 __tests__ 디렉토리에서 빼니까 이미지로 보낸 에러는 사라졌습니다.

영상에서는 setup.js를 __tests__ 디렉토리 안에 넣어서 해도 잘되던데, 왜 이런건지는 잘 모르겠네요.

그렇다 하더라도 아래의 에러는 계속 나네요

찰쓰

저도 동일한 에러가 발생합니다.

제가 추측하기론 두번째 Enzyme describe 를 주석처리 하고 나니

setup.js 파일을 읽어오는 것부터가 실패하네요.

분명 강의 내용 고대로 따라했음에도 안되는걸 보면

뭔가 강의내용 시점과 다른 변경사항이 있는게 아닌가 싶습니다.

박동호

지식공유자

강제로

$ jest tests/setup.js

와 같이setup.js 에 대한 검사를 수행하면

No tests found, exiting with code 1

와 같은 에러가 리턴되어야 합니다.

import 'react-native';

import React from 'react';

// import App from '../src/App';

import { Text } from 'react-native';

import { shallow } from 'enzyme';

와 같이 실제로 테스트가 없는 xxx.spec.js 파일이 존재할 경우 말씀하신 에러가 리턴됩니다.

jgam

질문자

동호님!
괜찮습니다. 현제 다시 진행중인데, setup.js에서 이번에는 에러가 뜨네요. 정말 토시하나 안틀리고 하신대로 다 따라서했는데 나오는 에러는 이렇습니다.

your test suite must contain at least one test.

제 생각인데, tests폴더 안에있으면 test가 무조건 하나정도 있어야 되는거같네요. 그렇지만 setup.js는 테스트가 하나도 없어서 에러가 뜨네요. 하지만, 동호님 강의에서는 테스트가없어서....저도 참 의문이네요. 혹시 추천해주실 방법이있나요?

박동호

지식공유자

동일한 코드, 동일한 환경을 구축하고 테스트를 해 보아도, 제 환경에서는 정상적으로 테스트가 되네요. 저도 좀더 확인을 해봐야 할것 같습니다. 시원한 답변을 드리지 못해서 죄송합니다.

jgam

질문자

버전이 틀리기는 합니다만, 제가 갖고있는것들이 다 업그레이드 버전이네요.

react : 16.8.6

react-native: 0.59.9

enzyme: 3.10.0

enzyme-adapter-react-16: 1.14.0

혹시 이것들을 다운그레이드 시켜야될까요?

박동호

지식공유자

app.js 에서 에러처럼 보여지는 부분은 현 상황과는 관련이 없는 부분입니다. 올려주신 코드를 그대로 복사해서 테스트를 돌려보면 정상적으로 테스트가 진행됩니다. 정한님의 경우도 import App from '../src/App' 을 코멘트하고 테스트를 해도 동일한 증상이 나오리라 보여집니다.

<Text> 가 <TouchableText> 로 인지되는 문제로 보아, 버전의 문제로 보여지기도 하는데요.

"react": "16.8.3",

"react-native": "0.59.8",

"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.13.1",

정환님의 버전과 비교를 한번 확인해보시는것은 어떨까요?

jgam

질문자

아 네. 그 부분은 저도 인지하고 있었습니다. 제가 여쭤봤던 original 질문으로 돌아가자면, 동호님의 코드는 태스트를 돌렸을때,

Received: text

가 나오고, 저같은경우는

Received: <Touchable Text>

가 나옵니다. 이 틀린 부분이 결국 에러를 일으키고있으니, app.js를 봐달라고 한고였습니다.

혹시 어떤 부분이 잘못 되었을까요?

박동호

지식공유자

일단은

const wrapper = shallow(<Text>text</Text>);

가 아니고

const wrapper = shallow(<Text>{text}</Text>);

라고 해주셔야 합니다. 이런 실수를 많이 하죠.;;; (제가 강의중에도 한번 같은 실수를 한것 같아요;;)

jgam

질문자

네!

App-test.js

/**
 * @format
 */

import 'react-native';
import React from 'react';
import App from '../src/App';
import { Text } from 'react-native';
import { shallow } from 'enzyme';

describe('Jest', ()=> {
it('is it working?', () => {
const a = 1;
expect(a + 1).toBe(2)
})
})

describe('Enzyme', () => {
it('is it working?', () => {
const text = 'some text';
const wrapper = shallow(<Text>text</Text>);
expect(wrapper.text()).toBe(text);
})
})

setup.js

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

박동호

지식공유자

안녕하세요. React-native-cli 로 초기화한 App.js 파일이네요. 혹시, 테스트 파일도 올려주실 수 있나요?

인프런 커뮤니티 질문&답변

enzyme?