反应测试：如何到达连接（redux）组件的实例

Question

我希望能够测试作为连接组件导出的组件的方法，因此我需要到达该组件的实例。

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent); 

我在遇到该实例时遇到问题。

Answer 1

我采用的方法是为MyComponent,mapStateToProps和mapDispatchToProps创建单元测试。它看起来像MyComponent的单元测试会完成你想要做的。

使用Redux进行集成测试有助于确定是否有将来的升级会破坏您所依赖的功能，但您无需使用Redux完全引导您的应用程序，以确定组件的方法是否按预期工作。

Answer 2

最简单的选择是导出未连接的组件，并在您传递将从商店中获得的道具时创建测试（基本上绕过mapStateToProps）。

另一个选项是为连接组件创建一个测试。在这种情况下，您需要将其包装在Provider中，并给它一个初始状态，以便它从商店本身获取信息。 ，做一个辅助的一个例子，与jest将是：

import React from 'react' 
import renderer from 'react-test-renderer' 
import { Provider } from 'react-redux' 

import configureMockStore from 'redux-mock-store' 

const fullRender = (jsx, state = {}) => { 
    const store = configureMockStore([](state) 
    const component = renderer.create(
    <Provider store={store}> 
     {jsx} 
    </Provider> 
) 

    return { store, component } 
} 
export default fullRender 

这可以被扩展到使用更实际的设置中，等，包括在状态的中间件（如咚）或也考虑路由考虑。然后你就可以建立自己的测试像这样（再次使用jest）：

import React from 'react' 
import { fullRender } from '../../test' 
import Header from './Header' 

describe('components',() => { 
    let state = { a: { b: 3 } } 
    describe('Header',() => { 
    it('renders correctly',() => { 
     const { component } = fullRender(<Header />, state) 
     expect(component.toJSON()).toMatchSnapshot() 
    }) 
    }) 
}) 

你可以存储你的测试作为夹具的“快照”，并将其提供给您的测试也是如此。