酶调用法

Question

假设我的 React 组件中有一个方法：

doSomething() {
    // method uses this.props and this.state
}

我想针对设置的不同道具和状态测试此方法。那我怎么称呼它呢？ MyClass.prototype.doSomething 将调用该函数，但未设置 this.props 和 this.state。

Answer 1

注意：下面是更好的解决方案

您可以 apply 您想要使用的 this 的值：

// MyClass.prototype.doSomething() becomes

var mockThis = { 
  props: { coolProp: 'coolValue1' }, 
  state: { coolStateKey: 'coolValue2' }
};
MyClass.prototype.doSomething.apply(mockThis);`

Answer 2

您可以使用 enzyme 的 instance 函数获取渲染组件的实例，并在其上调用方法。

const wrapper = shallow(<MyClass {...props} />) wrapper.instance().doSomething()

Answer 3

让我们假设您的 doSomething() 方法是 increaseByOne() ，它只是添加 +1

describe('Calculator', () => {
  it('should update state by 1 on increaseByOne()', () => {
    const wrapper = shallow(<Calculator />);
    expect(wrapper.instance().state().score).toBe(0);
    wrapper.instance().increaseByOne();
    expect(wrapper.instance().state().score).toBe(1);
  });
});

要了解更多信息，您可以查看有关 state() and Instance() docs

的文档

酶调用法

Enzyme call method

javascript

reactjs

enzyme