Использовать пользовательский рендер для рендеринга с использованием реагирующей-тестирующей библиотеки

Question

Я использую реагирующую библиотеку, и у меня есть собственный рендер:

const customRender = (node, ...options) => {
  return render(
    <ThemeProvider theme={Theme}>
      <MemoryRouter>{node}</MemoryRouter>
    </ThemeProvider>,
    ...options
  );
};

Я могу использовать это успешно для render в моем тесте, но не для rerender:

test("shows content once data has loaded", () => {
  const { queryByTestId, rerender, debug } = render(
    <ConnectAccount
      currentUser={{
        loading: true
      }}
    />
  );

  expect(queryByTestId("content")).toBeNull();

  rerender(
    <ConnectAccount
      currentUser={{
        user: {
          name: "Test User"
        }
      }}
    />
  );

  debug();
});

Я получаю ошибку TypeError: Cannot read property 'black' of undefined для rerender, Есть ли какой-нибудь способ для рендера использовать пользовательский рендер, поэтому мне не нужно оборачивать каждый рендер в ThemeProvider?

Answer 1

Вам нужно переориентировать rerender метод. Это должно работать:

const customRender = (node, options) => {
  const rendered = render(
    <ThemeProvider theme={Theme}>
      <MemoryRouter>{node}</MemoryRouter>
    </ThemeProvider>,
    options);

  return {
    ...rendered,
    rerender: (ui, options) =>
      customRender(ui, {container: rendered.container, ...options}),
    }
  };

Answer 2

Версия машинописного текста:

      function AppProvider({ children }: { children: React.ReactNode }) {
  return (
    <OtherProvider>
      <ThemeProvider theme={Theme}>
        <MemoryRouter>{children}</MemoryRouter>
      </ThemeProvider>,
    </OtherProvider>
  );
}

function renderInProvider(
  ui: ReactElement,
  options?: Omit<RenderOptions, "wrapper">
) {
  return render(<AppProvider>{ui}</AppProvider>, options);
}