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

Question

我正在使用 Redux 工具包进行设置。我们现在使用@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 as the original render function from @testing-library/react so that they can be used interchangeably (though it adds support for extra properties initialState and store in the options object). Internally, the custom render function calls on the library's render function, which they import with an aliased name rtlRender, but it sets a default property for the wrapper option 以便组件将在 redux Provider 组件内呈现。

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

之后

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

import { render as rtlRender } from "@testing-library/react";

// re-export everything
export * from "@testing-library/react";
// override render method
export function render(somethingCustom, ui, { ...renderOptions } = {}) {
  return rtlRender(ui, { ...renderOptions });
}

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

What does this part of the Redux document mean?

ecmascript-6

reactjs

redux

react-testing-library

testing-library