用酶的反应天然成分的模拟功能

Question

我正在尝试使用酶和玩笑来进行单位测试，以模拟扩展React.Component的类的函数，而我发现可以模拟继承的setState功能，但没有其他功能在组件中。

例如，我的应用程序组件具有TextInput在onChangeText事件上调用setState，并且TouchableOpacity在onPress事件中调用submitFilter。

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上查看此答案。

根据迁移指南，您收到的实例（）实际上是基础反应元素的转换。因此，您没有得到实际嘲笑的方法。要解决此问题，您需要监视原型。

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