-1

我正在使用 Redux-tool kit 来设置它。我们现在使用@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 }

4

2 回答 2

0

他们基本上是在创建自己的 React 测试库包的别名副本，其中除了render函数之外一切都相同。此设置在测试库文档部分Setup: Custom Render中有更详细的说明。

自定义render函数采用与原始函数相同的参数，因此它们可以互换使用（尽管它增加了对额外属性和对象的支持）。在内部，自定义渲染函数调用库的渲染函数，它们使用别名导入，但它为选项设置了默认属性，以便组件将在 redux组件内呈现。render@testing-library/reactinitialStatestoreoptionsrtlRenderwrapperProvider

现在到令人困惑的出口。 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 });
}
于 2021-02-21T23:13:15.010 回答
0

我不知道这个库，export * from '@testing-library/react'只是意味着你可以import从.@testing-library/reacttest-utils.js

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

于 2021-02-21T15:26:18.157 回答