Better

通常我们都比较喜欢测试很小而且仅依赖 props 的组件，因为这是最容易测试的情况，但事情可能不会那么理想

外部依赖

针对复杂一点的组件，通常组件还会依赖

• redux store
• react context
• react router

针对上述情况，我们需要用到 @testing-library/react 中 render 函数提供 wrapper option，在 Redux 的文档中，其实已经提供了标准的做法，代码如下

// test-utils.js
import React from 'react'
import { render as rtlRender } from '@testing-library/react'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
// Import your own reducer
import reducer from '../reducer'

function render(
  ui,
  {
    initialState,
    store = createStore(reducer, initialState),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }) {
    return <Provider store={store}>{children}</Provider>
  }
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions })
}

// re-export everything
export * from '@testing-library/react'
// override render method
export { render }

hooks 测试

对于 hooks 的测试，我们可以使用 react-hooks-testing-library 包。具体见文档

资料

• react-hooks-testing-library
• Writing Tests