如何在React组件上测试道具更新

小编典典

如何在React组件上测试道具更新

reactjs

什么是对React组件prop更新进行单元测试的正确方法。

这是我的测试装置；

describe('updating the value', function(){
        var component;
        beforeEach(function(){
            component = TestUtils.renderIntoDocument(<MyComponent value={true} />);
        });

        it('should update the state of the component when the value prop is changed', function(){
            // Act
            component.props.value = false;
            component.forceUpdate();
            // Assert
            expect(component.state.value).toBe(false);
        });
});

这可以正常工作，并且测试通过了，但是显示了反应警告消息

'Warning: Dont set .props.value of the React component <exports />. Instead specify the correct value when initially creating the element or use React.cloneElement to make a new element with updated props.'

我要测试的只是属性的更新，而不是使用其他属性创建元素的新实例。有没有更好的方法来执行此属性更新？

阅读 216

2020-07-22

共1个答案

小编典典

AirBnB的酶库为这个问题提供了一个优雅的解决方案。

它提供了一个setProps方法，可以在浅包装或jsdom包装上调用该方法。

    it("Component should call componentWillReceiveProps on update", () => {
        const spy = sinon.spy(Component.prototype, "componentWillReceiveProps");
        const wrapper = shallow(<Component {...props} />);

        expect(spy.calledOnce).to.equal(false);
        wrapper.setProps({ prop: 2 });
        expect(spy.calledOnce).to.equal(true);
    });

2020-07-22