使用酶 3 进行测试时无法为 React 16 调用 setState

Question

我刚刚升级了酶 3 和反应 16。我的测试之前工作正常。现在它失败了。以下是说明。

我的应用正在使用：

react@16.2.0
jsdome@^11.10.0
enzyme@^3.3.0

这是我的测试：

it('should show real numbers on click', () => {
    // at beginning, it shows some masked value
    expect(wrapper).to.contain
        .text(MASKED);
    // trying to do a click on the element
    let maskedElem = wrapper.find('.masked');
    maskedElem.prop('onClick')();

    // expecting it to have a new value
    expect(wrapper).to.contain
        .text(VALUE);
});

maskedElem.prop('onClick')(); 失败了。

这是错误堆栈。

 Error: An error was thrown inside one of your components, but React doesn't know what it was. This is likely due to browser flakiness. React does its best to preserve the "Pause on exceptions" behavior of the DevTools, which requires some DEV-mode only tricks. It's possible that these don't work in your browser. Try triggering the error in production mode, or switching to a modern browser. If you suspect that this is actually an issue with React, please file an issue.
  at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:586:19)
  at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:438:27)
  at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:10366:7)

这是我正在测试的组件。

class Phone extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            clicked: false
        };
    }

    onClick() {
        this.setState({
            ...this.state,
            clicked: true
        })
    }
    render() {
        if (this.state.clicked) {
            return (
                <span>{this.props.value}</span>
            );
        } else {
            return (
                <span onClick = {() => this.onClick()}
                className='masked'>
                    {MASKED}
                </span>
            );

        }

    }
}

Answer 1

您可以使用酶 API 函数 simulate() 来激活您的点击事件，而不是直接调用 onClick 函数

// trying to do a click on the element
let maskedElem = wrapper.find('.masked');
maskedElem.simulate('click);