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

Question

我使用redux工具包来设置它。我们现在使用@testing-library/react来设置与测试相关的设置。我在看官方文件的时候有一个问题。

// 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'只是意味着任何你可以从@testing-library/react中import的东西，你现在可以直接从这个文件中导入，test-utils.js。

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

Answer 2

他们基本上是在创建自己的别名副本React测试库包，除了render函数之外，一切都是一样的。在测试库文档设置:自定义渲染一节中有更详细的说明。

自定义render函数接受与@testing-library/react的原始render函数相同的参数，因此它们可以互换使用(尽管它在options对象中添加了对额外属性initialState和store的支持)。在内部，自定义呈现函数调用库的呈现函数，它们以别名rtlRender导入，但它为wrapper选项设置了默认属性，以便组件将在reduxProvider组件中呈现。

现在来看令人困惑的导出。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 });
}