开玩笑的模拟组件方法

Question

说我有以下组件：

export class ExampleComponent extends Component {
    exampleMethod1 = () => {
      console.log('in example 1')
    }
    exampleMethod2 = () => {
      console.log('in example 2')
      this.exampleMethod1()
    }
    render() {
      return (
        <TouchableOpacity id='touchable' onPress={exampleMethod2}><Text>Touchable</Text></TouchableOpacity>
      )
    }
}

这正是您的期望。该按钮出现，可以按下。这两种方法都会发射和主机记录其文本。

我现在尝试用开玩笑进行测试：

describe('example tests', () => {
  let wrapper
  beforeEach(() => {
    wrapper = shallow(<ExampleComponent/>)
  })
  it('this test fails. Interestingly both messages still print', () => {
    const instance = wrapper.instance()
    instance.exampleMethod2 = jest.fn()
    wrapper.find('#touchable').simulate('press')
    //wrapper.update() uncommenting this line has no effect.
    expect(instance.exampleMethod2.mock.calls.length).toBe(1)
  })
  it('this test passes. Only the first message prints', () => {
    const instance = wrapper.instnace()
    instance.exampleMethod1 = jest.fn()
    wrapper.find('#touchable').simulate('press')
    expect(instance.exampleMethod1.mock.calls.length).toBe(1)
  })
})

注释后，第一个测试失败，原始消息打印，好像我从未嘲笑过该方法。这不论wrapper.update()是否运行。

有趣的是，如果我们用看似相同的箭头函数替换OnPress，则如下：

onPress={() => {exampleMethod2()}}

测试突然通过。这整个事情暗示了这个具有约束力的恶作剧（我认为？）的怪异。关于发生的事情的任何解释都将不胜感激！

Answer 1

如果要在组件的原型对象上测试自定义方法，则应使用酶使用mount函数，然后使用spyOn来模拟并跟踪对该方法的调用。

export class ExampleComponent extends Component {
  exampleMethod1 = () => {
    console.log('in example 1');
    this.setState({ example1: true });
  }
  exampleMethod2 = () => {
    console.log('in example 2')
    this.exampleMethod1()
  }
  render() {
    return (
      <TouchableOpacity id='touchable' onPress={exampleMethod2}><Text>Touchable</Text></TouchableOpacity>
    )
  }

}

describe('example tests', () => {
  let wrapper
  beforeEach(() => {
    wrapper = mount(<ExampleComponent/>)
  })
  afterAll(() => { wrapper = null; })
  it('some desc here', () => {
    const instance = wrapper.instance();
    spyOn(instance, 'exampleMethod1').and.callThrough();
    expect(instance.setState).toHaveBeenCalled();
  });
})