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

这可以扩展为使用更真实的设置，例如在状态中包含中间件（例如 thunk ）或者也考虑路由。然后你可以像这样建立你的测试（再次使用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()
    })
  })
})

您可以将测试的“快照”存储为固定装置，并将其提供给您的测试。

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

2 个答案: