Question

我有一个组件，我试图模仿它所引用的道具子组件。原因是我想确保组件中的逻辑设置正确。

组件：

class Toolbar extends Component {
    render() {
        return (
            <ComponentA>
                <ComponentB
                    onRenderItem={this.renderItem}
                />
            </ComponentA>
        );
    }

    renderItem() {
        return (
            <ComponentC
                onChange={(event) => {
                    // logic based on event
                    return anotherMethod;
                }}
            />
        );
    }
}

我希望在我.setProps({...})之后使用酶.find()来获取子组件但不支持。

测试代码如下：

it('test', () => {
    const wrapper = mount(<Toolbar/>);
    const child = wrapper.find(ComponentC);
    const onChangeMock = jest.fn();
    child.setProps({onChange: onChangeMock}); // invalid
    child.props().onChange = onChangeMock; // invalid

    expect(onChangeMock.mock.calls.length).to.be(1);
    // additional validation to ensure my logic in component is correct
});

Answer 1

如果你想看看ComponentC的方法是否被调用，我建议在这里使用Sinon间谍。

如果您更改工具栏，请执行以下操作：

class Toolbar extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    do something here... 
  }

  render() {
    ...and here...
  }

  renderItem() {
    return (
      <ComponentC
        onChange={(event) => {
          this.handleChange(event);
        }
      />
    );
  }
}

完成后，您可以像这样监视工具栏的handleChange方法：

const onChangeSpy = sinon.spy(Toolbar.prototype, 'handleChange');

然后在测试中你必须实际模拟变化，以便调用onChange函数。你可以这样做：

child.simulate('change');

最后，检查是否调用了间谍：

expect(onChangeSpy.calls.length).toEqual(1);

嘲笑儿童成分属性jest +酶+反应

1 个答案: