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

用酶3测试时，无法为React 16调用setState

1 个答案: