Typescript 使用&reaction测试库&如何使用提供程序包装我的所有测试组件

创建一个wrapper组件，用于渲染任何提供者并包装childrenprops .

const ProviderWrapper = ({ children }) => (
  <Provider store={store}>
    <BrowserRouter>
      {children}
    </BrowserRouter>
  </Provider>
);

test("Inputs should be initially empty", () => {
  render(<Login />, { wrapper: ProviderWrapper });

  const emailInput: HTMLInputElement = screen.getByRole("textbox", {
    name: /email/i,
  });

  expect(emailInput.value).toBe("");
});

如果您只需要包装使用相同提供程序测试的101个组件，那么您也可以创建一个custom render function组件.

示例:

import {render} from '@testing-library/react';

const ProviderWrapper = ({ children }) => (
  <Provider store={store}>
    <BrowserRouter>
      {children}
    </BrowserRouter>
  </Provider>
);

const customRender = (ui, options) =>
  render(ui, { wrapper: ProviderWrapper, ...options });

// re-export everything
export * from '@testing-library/react';

// override render method
export { customRender as render };

test("Inputs should be initially empty", () => {
  render(<Login />); // <-- custom render already wraps with providers

  const emailInput: HTMLInputElement = screen.getByRole("textbox", {
    name: /email/i,
  });

  expect(emailInput.value).toBe("");
});