3

我找不到任何关于如何在useEffect. 我正在获取数据，然后在第二次获取开始之前，我在按钮上设置了“加载数据”工具提示。一旦第二次提取完成，工具提示就会变成“无法使用此功能”或根本没有工具提示。我不确定如何进入 jest 在 fetch 调用之前或之后的测试状态。

问题是我的测试没有看到开始的“加载数据”工具提示，即使它在我手动测试时出现。我很难理解何时等待第二个电话，何时实际发生以及何时结束......

澄清getAccountInfo一下是一个获取请求函数，它返回一个具有accountInfo属性的对象。

错误：

TestingLibraryElementError：无法找到具有以下文本的元素：/正在加载数据/。这可能是因为文本被多个元素分解。在这种情况下，您可以为您的文本匹配器提供一个功能，以使您的匹配器更加灵活。

这是我的测试

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

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

describe('AccountInfo', () => {
  beforeAll(() => fetch.enableMocks());
  afterAll(() => fetch.disableMocks());
  beforeEach(() => jest.clearAllMocks());
  
  it('displays "loading data" tooltip on hover' () => {
    fetch.mockResponse(
      JSON.stringify({
        orgId: testId,
        name: 'Adam',
      }),
      { status: 200 },
    );

    const { getByRole, findByText } = render(
      <AccountInfo />
    );

    const importButton = getByRole('button', { name: 'Import' });
    fireEvent.mouseEnter(importButton);

    expect(await findByText(/loading data/)).toBeInTheDocument();

    await waitFor(() =>
      expect(getAccountInfoSpy).toHaveBeenCalledWith(testId),
    );

    expect(findByText(/cannot use this feature/).toBeInTheDocument();
  });
});

这是 AccountInfo 组件

const AccountInfo = () => {
  const { customerId } = useCustomerContext();
  const [isLoading, setIsLoading] = useState(true);
  const [accountInfo, setAccountInfo] = useState({});
  const [isAccountInfoLoading, setIsAccountInfoLoading] = useState(false);
  
  useEffect(() => {
    const fetchAccountData = async () => {
      const rawRes = await fetch(`/customer/${customerId}`);
      const res = await rawRes.json();
      setIsLoading(false);
      
      if (res.orgId) {
        setIsAccountInfoLoading(true);
        try {
          const accountInfoRes = await getAccountInfo(res.orgId);
          setAccountInfo(accountInfoRes.accountInfo);
        } catch (error) {
          console.log('error', error);
        } finally {
          setIsAccountInfoLoading(false);
        }
      }
    }
    fetchAccountData();
  });
  
  function renderTooltip() {
    if (isAccountInfoLoading) {
      return 'loading data';
    } else {
      return !accountInfo.active
        ? 'cannot use this feature'
        : undefined;
    }
  }
  
  return (
    <>
      <Button tooltip={renderTooltip()}>
        Import
      </Button>
    </>
  );
};

4

0 回答 0