测试 – 如何在React ES6类中测试箭头功能

发布时间：2020-12-15 20:19:19 所属栏目：百科来源：网络整理

导读：我在我的React组件中使用了箭头函数来避免绑定这个上下文,例如我的组件看起来像这样; class Comp extends Component { _fn1 = () = {} _fn2 = () = {} render() { return (div/div); }} 如何在我的测试用例中测试_fn1和_fn2函数？因为这些功能与React组件本

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

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

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

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

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

解决方法

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

class MyComponent extends Component {
    state = {
        toggle: false
    }

   _fn1 = () => {
       this.setState(previousState => ({
           toggle: !previousState.toggle
       });
   }

   render() {
      const { toggle } = this.state;

      return (
          <button onClick={this.clickHandler}>
              Turn me {toggle ? 'on' : 'off'}
          </button>
      );
   }
}

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

使用sinon / chai / mocha / enzyme：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!