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

})

使用jest

1 个答案: