React Native component with Enzyme 모의 기능

Question

React.Component을 확장하는 클래스의 기능을 모의하기 위해 Enzyme 및 Jest를 사용하여 단위 테스트를 시도하고 있으며 상속 된 setState 함수를 모의 할 수 있지만 다른 기능은 모의하고 있습니다. 구성 요소.

예를 들어, 내 응용 프로그램 구성 요소는 onChangeText 이벤트에 setState를 호출하는 TextInput을 가지고, 그리고 onPress 이벤트에 submitFilter를 호출하는 TouchableOpacity.

export default class App extends React.Component { 
    constructor(props) { 
    super(props) 

    this.state = { filter: '' } 
    } 
    submitFilter =() => { 
    if (this.state.filter.length <= 0) { 
     Alert.alert('Filter is blank'); 
    } 
    } 
    render() { 
    return (
     <View style={styles.container}> 
     <View style={styles.filterContainer}> 
      <TextInput 
      style={styles.filterInput} 
      placeholder='Filter...' 
      value={this.state.filter} 
      onChangeText={(text) => {this.setState({ filter: text })}} 
      /> 
      <TouchableOpacity 
      style={styles.filterButton} 
      onPress={this.submitFilter}> 
      <Text style={styles.filterButtonLabel}>Go</Text> 
      </TouchableOpacity> 
     </View> 
     </View> 
    ); 
    } 
} 

setState 및 submitFilter, 각 기능 호출에 대해 동일한 패턴 조롱에 동일한 패턴을 사용 :

import Adapter from 'enzyme-adapter-react-16'; 
import Enzyme from 'enzyme'; 

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

describe('interaction',() => { 
    let wrapper 
    let mockFn 
    beforeEach(() => { 
    wrapper = Enzyme.shallow(<App />) 
    mockFn = jest.fn() 
    }) 
    describe('editing the filter input',() => { 
    beforeEach(() => { 
     wrapper.instance().setState = mockFn 
     wrapper.find('TextInput').first().props().onChangeText('waffles'); 
    }) 
    it('should update the filter state',() => { 
     expect(mockFn).toHaveBeenCalledTimes(1) 
    }) 
    }) 
    describe('clicking filter button',() => { 
    beforeEach(() => { 
     wrapper.instance().submitFilter = mockFn 
     wrapper.find('TouchableOpacity').first().props().onPress() 
    }) 
    it('should invoke the submitFilter callback',() => { 
     expect(mockFn).toHaveBeenCalledTimes(1) 
    }) 
    }) 
}) 

첫 번째 패스를, 나는 조롱 사용하기 어떤 방법 확실하지 않다 submitFilter 함수가 호출되는지 확인하는 기능이 있습니까?

interaction 
    editing the filter input 
     ✓ should update the filter state (3ms) 
    clicking filter button 
     ✕ should invoke the submitFilter callback (18ms) 

    ● interaction › clicking filter button › should invoke the submitFilter callback 

    expect(jest.fn()).toHaveBeenCalledTimes(1) 

    Expected mock function to have been called one time, but it was called zero times. 

     at Object.<anonymous> (App.test.js:47:16) 
     at tryCallTwo (node_modules/promise/lib/core.js:45:5) 
     at doResolve (node_modules/promise/lib/core.js:200:13) 
     at new Promise (node_modules/promise/lib/core.js:66:3) 
     at tryCallOne (node_modules/promise/lib/core.js:37:12) 
     at node_modules/promise/lib/core.js:123:15 

아이디어가 있으십니까?

Answer 1

내가 어댑터를 필요로하는 효소 3으로 업그레이드 한 후에도이 문제가 발생했습니다. 내가 고쳤던 방식은 StackOverflow에서 this answer을 보는 것이었다.

에 따르면 instance()는 실제로 기본 반응 요소의 변형입니다. 그래서 당신은 모의하는 실제 방법을 얻지 못하고 있습니다. 이 문제를 해결하려면 프로토 타입을 간첩해야합니다. // GitHub의 : [프로토 타입에 스파이] (HTTPS에 -

import Adapter from 'enzyme-adapter-react-16'; 
import Enzyme from 'enzyme'; 

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

describe('interaction',() => { 
    let wrapper 
    let mockFn 
    let spy 

    describe('editing the filter input',() => { 
    beforeEach(() => { 
     spy = jest.spyOn(App.prototype, 'setState'); 
     wrapper = Enzyme.shallow(<App />); 
     wrapper.find('TextInput').first().props().onChangeText('waffles'); 
    }) 
    afterEach(() => { 
     spy.mockRestore(); 
    }) 
    it('should update the filter state',() => { 
     expect(spy).toHaveBeenCalledTimes(1); 
    }) 
    }) 
    describe('clicking filter button',() => { 
    beforeEach(() => { 
     spy = jest.spyOn(App.prototype, 'submitFilter'); 
     wrapper = Enzyme.shallow(<App />); 
     wrapper.find('TouchableOpacity').first().props().onPress() 
    }) 
    afterEach(() => { 
     spy.mockRestore(); 
    }) 
    it('should invoke the submitFilter callback',() => { 
     expect(spy).toHaveBeenCalledTimes(1) 
    }) 
    }) 
})