testing - 如何在 React ES6 类中测试箭头函数

Question

我在我的 React 组件中使用了箭头函数来避免绑定(bind)这个上下文，例如我的组件看起来像这样；

class Comp extends Component {
   _fn1 = () => {}
   _fn2 = () => {}
   render() {
      return (<div></div>);
   }
}

如何在我的测试用例中测试 _fn1 和 _fn2 函数？因为这些功能没有与 React 组件本身相关联，所以当我这样做时

 fnStub = sandbox.stub(Comp.prototype, "_fn1");

它不会工作，因为 _fn 没有与 Comp.prototype 绑定(bind)。因此，如果我想用箭头语法创建函数，我该如何在 React 中测试这些函数呢？谢谢!

Answer 1

ES6 函数或箭头函数没有添加到类原型(prototype)中。但是，有几种方法可以测试它们:-

• 测试当合适的事件发生时调用函数本身类原型(prototype)上存在 ES5 函数，这样的事情是可能的:

  import Component from 'path/to/component';
  import { shallow } from 'enzyme';
  describe(<Component>, () => {
    it('should call handleSubmit', () => {
      const spy = jest.spyOn(Component.prototype, 'handleSubmit');
      const wrapper = shallow(<Component />);
      ...
      //Invoke handleSubmit
      ...
      expect(spy).toBeCalled()
    });
  });
  

而 ES6 函数存在于挂载组件的实例上(你也可以使用 shallow)

    import Component from 'path/to/component';
    import { mount } from 'enzyme';
    describe(<Component>, () => {
      it('should call handleSubmit', () => {
        const wrapper = mount(<Component />);
        ...
        const spy = jest.spyOn(wrapper.instance(), 'handleSubmit');
        //update the instance with the new spy
        wrapper.instance().forceUpdate();
        ...
        //invoke handleSubmit
        expect(spy).toBeCalled()
      });
    });

• 通过模拟将调用这些函数的操作并测试预期行为来测试它们的功能

假设组件内容如:

      state = {
        title: 'Current Title'
      };
      updateTitle = (event) => {
        title = event.target.value;
        this.setState({ title });
      }
      render() {
        return (
          <div>
            <input type="text" value={this.state.title} onChange={this.updateTitle} />
          <div>
        )
      }

测试

    ...
    wrapper.find('input').simulate('change', {target: {value: 'New title'}});
    expect(wrapper.state().title).toBe('New Title');
    ...

希望对您有所帮助。