Question

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

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

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

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

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

Answer 1

一般来说，我发现更容易测试这些函数是否导致了正确的组件状态，而不是测试函数本身。例如，这是一个在单击按钮时切换状态变量的组件：

describe('My Component', () => {
    it('alternates text display when the button is clicked', () => {
        const wrapper = shallow(<MyComponent />);

        expect(wrapper).to.have.text('Turn me off');

        wrapper.find('button').simulate('click');

        expect(wrapper).to.have.text('Turn me on');
    });
});

我在这里的首选方法是将组件作为一个整体进行测试，即单元测试的“单位”是组件。因此，测试将找到按钮，模拟单击，并确保显示正确的文本。这可能不是教科书单元测试，但它实现了测试组件的目标。

使用sinon / chai / mocha / enzyme：

dataObject.WorkoverRecommendation

Answer 2

ES6函数或箭头函数未添加到类原型中。但是，有两种方法可以对其进行测试：-

测试是否在发生适当的事件时调用函数本身 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函数存在于已安装组件的实例上（您也可以使用浅表）

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

Test

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

我希望这会有所帮助。

如何在React ES6类

2 个答案: