Question

我正在使用 Redux-tool 工具包来设置它。我们现在使用@testing-library/react 来设置与测试相关的设置。我在查看 official document 时遇到了一个问题。

// 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 }

这部分在上面的代码部分有什么作用？

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

Answer 1

我不知道这个库，但是 export * from '@testing-library/react' 只是意味着您可以从 import 中 @testing-library/react 的任何内容，您现在可以直接从这个文件 test-utils.js 中导入。

我猜他们发现在一个地方只访问 react 测试模块很方便，render 方法被上面定义的他们自己的自定义版本覆盖。

Answer 2

他们基本上是在创建自己的 React 测试库包的别名副本，除了 render 函数外，所有内容都相同。测试库文档部分 Setup: Custom Render 中更详细地解释了此设置。

自定义 render 函数 takes the same arguments 作为来自 render 的原始 @testing-library/react 函数，以便它们可以互换使用（尽管它增加了对额外属性 {{1} } 和 initialState 在 store 对象中）。在内部，自定义渲染函数调用库的渲染函数，它们使用别名 options 导入该函数，但它为 wrapper option 设置了默认属性，以便组件将在 redux { {1}} 个组件。

现在是令人困惑的出口。 rtlRender 从测试库中获取所有导出并重新导出它们。 Provider 用自定义函数覆盖了之前导出的渲染函数，因此它需要在 export * from '@testing-library/react' 之后。

至于为什么他们会在一个地方创建函数，然后 export { render } 它而不是仅仅执行 export *，我认为这只是代码风格偏好的问题。据我所知，这似乎工作正常：

export

Redux 文档的这部分是什么意思？

2 个答案: