0

我有一个逐步对话框组件，它根据步骤呈现不同的主体。我的第一步 Jest 测试失败了，因为在它结束时，第二步主体正在尝试获取一些数据。理想情况下，我希望避免在第一步测试中测试与第二步有关的任何内容，但我不知道该怎么做。

最终，我开始嘲笑我的 fetch 响应以“摆脱”这个问题，但这也不太有效。第二步 useEffect 中的 fetch 函数执行response.json()，结果在我的测试中出现错误：

FetchError：无效的 json 响应正文原因：JSON 输入意外结束

任何想法如何正确模拟响应以便我看不到上述错误？正如我理想地提到的那样，我想在第一步结束测试，但第二个在微调器消失后自动呈现。

import { Dialog } from './Dialog';
import { render, waitForElementToBeRemoved, fireEvent } from '@testing-library/react';
import fetch from 'jest-fetch-mock';
import * as utils from './utils';

const getAccountInfoSpy = jest.spyOn(utils, 'getAccountInfo');

describe('Dialog', () => {
  beforeEach(() => render(<Dialog />));

  test('loading spinner disappears after response', async () => {
    fireEvent.click(screen.getByRole('button', { name: 'Continue' }));
    expect(screen.getByText('Loading');

    const promise = Promise.resolve({ test: 'abc' });
    getAccountInfoSpy.mockResolvedValue(promise);

    expect(getOrganizationInfoSpy).toHaveBeenCalledTimes(1);
    await waitForElementToBeRemoved(() => screen.getByText('Loading'));

    // This is the mock of the second step's fetch
    // Once the above loading message disappears,
    // the second step's body with a fetch is rendered
    fetch.mockResponse(
      JSON.stringify({
        test: 'abc',
      }),
    );
  });
});

在第二步的正文中使用Effect

useEffect(() => {
  const rawRes = await fetch(`/accounts/${orgName}`);
  const accounts = await rawRes.json();
  setAccounts(accounts);
});
4

0 回答 0