测试中组件的访问状态答案

【问题标题】：Access state of a component in a test测试中组件的访问状态
【发布时间】：2019-01-14 16:50:41
【问题描述】：

当我们注入不同的 props 时，我有一个组件会改变他的一些 props。

我正在努力寻找一种简单的方法来从我的测试中访问我的浅化组件的状态

代码如下：

describe('componentWillReceiveProps', () => {
    it('update state isDedicatedDealPriceSelected to true', () => {
        const productComponent = shallow(<Product selectedPriceOption="Test" />);
        productComponent.setProps({ selectedPriceOption: 'dedicatedDealPrice' });
        expect(productComponent.props.isDedicatedDealPriceSelected).toBeTruthy();
    });
});

我没有定义，我想访问应该是真实的道具 isDedicatedDealPriceSelected。我想我在 productComponent.props.isDedicatedDealPriceSelected 的最后一行写错了如何访问我的组件的道具？

我在测试中使用 enzime 来浅渲染我的组件。

提前致谢！

编辑：我不是要访问道具，而是要访问状态！抱歉打错了

【问题讨论】：

"我有一个组件，当我们注入不同的 props 时，它会改变他的一些 props。"我会说这是一个坏主意。 Props 是由父组件设置的东西。认为它是不可变的。还有你真正在测试什么？看起来您正在测试一个与组件公共 API 无关的实现细节：它的外观或行为方式。
对不起，组件正在改变他的状态，而不是支持我的坏事，我扭曲了条款（一天结束）我想访问我的组件的状态。我试过productComponent.state().isDedicatedDealPriceSelected，这就是我一直在寻找的答案！

标签： javascript reactjs jestjs enzyme

【解决方案1】：

似乎setProps 在重新渲染后执行了回调。也许您的测试需要是异步的，并且要在此回调中完成断言。

从例子来看，似乎只有componentWillReceiveProps被同步调用了。

https://airbnb.io/enzyme/docs/api/ShallowWrapper/setProps.html

【讨论】：

【解决方案2】：

要访问浅渲染组件的状态，您可以使用：

const wrapper = shallow(<component />);
wrapper.state().componentVar

要访问浅渲染组件的功能，您可以使用：

wrapper.instance().componentFunction()

【讨论】：