如何测试React组件的prop更新

Question

单元测试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.'

我想要测试的是属性的更新,而不是创建具有不同属性的元素的新实例.有没有更好的方法来进行此属性更新？

Answer 1

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

它提供了一个setProps方法,可以在shallow或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);
    });

Answer 2

如果在同一容器节点中重新呈现具有不同props的元素,则将更新它而不是重新装入.见React.render.

在您的情况下,您应该ReactDOM.render直接使用而不是TestUtils.renderIntoDocument.后者在每次调用时都会创建一个新的容器节点,因此也是一个新的组件.

var node, component;
beforeEach(function(){
    node = document.createElement('div');
    component = ReactDOM.render(<MyComponent value={true} />, node);
});

it('should update the state of the component when the value prop is changed', function(){
    // `component` will be updated instead of remounted
    ReactDOM.render(<MyComponent value={false} />, node);
    // Assert that `component` has updated its state in response to a prop change
    expect(component.state.value).toBe(false);
});

Answer 3

警告:这实际上不会改变道具.

但对我来说,我想要的只是测试我的逻辑componentWillReceiveProps.所以我myComponent.componentWillReceiveProps(/*new props*/)直接打电话.

我不需要/想要测试React在道具改变时调用方法,或者当道具改变时React设置道具,只是如果道具与传入的内容不同,则会触发一些动画.

Answer 4

快速添加，因为我正在寻找testing-library的答案，但在这里没有找到它：本期有一个例子，它看起来像这样：

const {container} = render(<Foo bar={true} />)

// update the props, re-render to the same container
render(<Foo bar={false} />, {container})

另外，testing-library 现在提供了一种可以完成相同任务的rerender方法。