使用enzyme.mount（）。setProps与react-redux提供程序

我有一个测试，它是设置道具，观察组件的一些变化。唯一的问题在于，我将呈现的元素封装在<Provider>中，因为树下面有一些连接的组件。使用enzyme.mount（）。setProps与react-redux提供程序

我通过

const el =() => <MyComponent prop1={ prop1 } />; 
const wrapper = mount(<Provider store={store}>{ el() }</Provider>);

渲染，然后我试图遵守以下使用一些变化：

wrapper.setProps({ /* new props */ }); 
// expect()s etc.

问题是setProps()没有正确设置道具上包裹组件。我认为这是因为<Provider>实际上并没有传递道具，因为它不是HoC。有没有更好的方法来测试，而不仅仅是改变本地范围的道具变量和重新渲染？

来源

2017-02-28 GTF

现在，我已经通过'安装（EL，{背景下，childContextTypes}）传承语境'而不是用''包装解决了这个问题（虽然不是问题）。 – GTF

您应该只打电话给setProps封装的组件或父。

一个很好的经验法则是你的测试只应该测试一个单独的组件（父母），因此不允许使用酶来设置儿童道具。

https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/setProps.md#setpropsnextprops--self

如果您有子组件进一步下跌，我们需要满足店内依赖关系（通过提供商和内容），然后就是罚款，但这些子组件应该真正拥有自己独立的测试。

这就是你会被鼓励在setProps上写一个变化测试的地方。

如果您发现自己正在编写容器或连接器的测试，那么您确实只需要验证子组件是否正在接收正确的道具和/或状态。例如：

import { createMockStore } from 'mocks' 
import { shallwo } from 'enzyme' 
// this component exports the redux connection 
import Container from '../container' 

const state = { foo: 'bar' } 

let wrapper 
let wrapped 
let store 

beforeEach(() => { 
    store = createMockStore(state) 
    wrapper = shallow(<Container store={store} />) 
    wrapped = wrapper.find('MyChildComponent') 
}) 

it('props.foo',() => { 
    const expected = 'bar' 
    const actual = wrapped.prop('foo') 
    expect(expected).toEqual(actual) 
})

另外一个技巧是，它有助于理解浅薄之间的差别并安装这样你就不会无谓地嘲讽依赖于测试的孩子，这里最多的回答是一个很好看的：

When should you use render and shallow in Enzyme/React tests?

来源

2017-12-31 16:11:18 lfender6445

使用enzyme.mount（）。setProps与react-redux提供程序

回答

相关问题