React / Jest - есть ли способ подождать, пока макет разрешится, перед тем как отрисовать

Question

В моем реактивном компоненте по умолчанию для загрузки установлено значение true, а затем выборка, которая при возврате устанавливает загрузку в false. Когда я возвращаю свой jsx-код, у меня есть проверка, подобная {! loading &&, которая работает, но в моем тесте выборка проверяется и вызывается, но сначала она вызывает render, поэтому она не отображает компоненты.

test('App component renders and contains prop given to it', async () => {
  jest.spyOn(window, 'fetch').mockResolvedValue({
    json: jest.fn().mockResolvedValue({ value: 'test' }) as Partial<Response>,
  } as Response);

  await act(async () => {
    const testProp = 'my test';

    const { container, getByText } = render(<App testProp={testProp} />);

    const testPropElement = getByText(testProp);
    console.log('test2');

    expect(testPropElement).toBeInTheDocument();
  });
});

Выборка выглядит примерно так:

fetch(`/api/url`)
      .then((response) => response.json())
      .then((data) => {
        console.log('test1');
        setLoading(false);
      });

Когда я консольный журнал, чтобы увидеть порядок вещей, он определенно проходит через mockResolvedValue и показывает 'test1' после 'test2'.

У кого-нибудь есть идеи? спасибо за помощь.

Answer 1

Вы наблюдаете это, потому что ваш макет выборки (и выборка сам) возвращает Promise, который вы не разрешили в своем тесте, а Jest автоматически разрешает его для вас после его завершения. Вы хотите разрешить его раньше ожидаемого, чтобы он мог go до then обратного вызова, изменить состояние и выполнить повторный рендеринг компонента.

React-testing-library (что, я вижу, вы с помощью) предоставляет утилиту для этого случая: waitFor . Это просто подождет некоторое время, пока ваше обещание разрешится и элемент появится.

В качестве альтернативы вы можете использовать findByText , который вы можете await (в основном просто promisified версия getBy* функции) и он также будет делать то же, что и выше.