Блог

У меня есть компонент, который использует крюк, который извлекает данные с сервера, и я издевался над этим крючком, чтобы вернуть свои данные тестирования. Теперь, если mutate функция (возвращаемая крючком) вызывается, обычная реализация снова извлекает данные и вызывает повторный рендеринг (я использую swr , вот mutate ссылка).

Как запустить повторный рендеринг / setState на издевательском крючке?

Что я хочу проверить: просто, если пользователь создает элемент, список элементов должен быть повторно извлечен и отображен.

Код для иллюстрации проблемы:

 const existing = [...]
const newlyCreated = [...];

useData.mockReturnValue({ data: [existing] });

const { getByRole, findByText } = render(<MyComponent />);
const form = getByRole("form");
const createButton = within(form).getByText("Create");

useData.mockReturnValue({ data: [existing, newlyCreated] });

// createButton.click();
// Somehow trigger re-render???

for (const { name } of [existing, newlyCreated]) await findByText(name);
 

Вам не нужно запускать повторный рендеринг в своем тесте.

Проблема в том, что кнопка в вашем пользовательском интерфейсе изменяет данные, но, поскольку вы издеваетесь useData , этой мутации не происходит.

Вы можете просто добавить mutate() в свой макет и назначить ему функцию макета.

Вам не нужно модульно тестировать внутреннюю работу собственных SWR mutate() — это уже охвачено их собственным проектом.

 const existing = ["Mercury", "Venus", "Earth", "Mars"];
const newItem = "Jupiter";

test("Create button should call mutate() with correct value", async () => {
  const mutate = jest.fn();
  jest.spyOn(useData, "default").mockImplementation(() => ({
    data: existing,
    mutate
  }));
  let resu<
  act(() => {
    result = render(<Form />);
  });
  await waitFor(() => {
    existing.forEach((item) => {
      expect(result.getByText(item)).toBeInTheDocument();
    });
  });
  const input = result.container.querySelector("input");
  fireEvent.change(input, { target: { value: newItem } });
  const createButton = result.getByText("Create");
  createButton.click();
  expect(mutate).toBeCalledWith([...existing, newItem], false);
});
 

Пример на CodeSandbox