reactjs - 在 useEffect Hook 中进行的异步调用的测试结果

Question

我试图断言我的自定义 Hook 在挂载时从 API 返回一些数据。

代码如下所示:

import * as React from 'react';
import { findByStatus } from '../../services/AssignmentService';
import Assignment from '../../models/Assignment';
import AssignmentList from './AssignmentList';

type AssignmentListApiHookTuple =  [Assignment[], React.Dispatch<React.SetStateAction<string>>];

export const useAssignmentListApi = (initialStatus: string = ''): AssignmentListApiHookTuple => {
  const [assignments, setAssignments]  = React.useState<Assignment[]>([]);
  const [status, setStatus] = React.useState<string>(initialStatus);
  React.useEffect(
    () => {
      findByStatus(status).then((res) => { setAssignments(res); });
    },
    [status],
  );

  return [
    assignments,
    setStatus,
  ];
};

const AssignmentListContainer = (props: { status: string }) => {
  const [assignments, setStatus] = useAssignmentListApi(props.status);

  return (<AssignmentList assignments={assignments} />);
};

export default AssignmentListContainer;

测试看起来像这样:

test('useAssignmentApi correctly sets the state', () => {
    const mockReturnValue = [{some: 'value'}];
    (AssignmentService.findByStatus as jest.Mock<any, any>)
      .mockResolvedValue(mockReturnValue);

    // Setup a dummy component to pass the custom hook
    const TestHook = (props: { callback: Function }) => {
      const { callback } = props;
      callback();
      return <div />;
    };

    const testHook = (callback: Function) => mount(<TestHook callback={callback}/>);

    const component = testHook(() => {
      const [assignments, setAssignment] = useAssignmentListApi('new');
     setTimeout(() => { expect(assignments).toEqual(mockReturnValue); } , 10);

    });
  });

这个测试在 setTimeout() 中有任何延迟，但如果我不在那里放置 setTimeout 总是失败？我究竟做错了什么？

Answer 1

我最终使用了 react-testing-library并利用他们的 waitForElement api 等待，直到我找到在数据获取完成后我会看到的元素/文本，然后断言呈现的值。

测试现在看起来像:

 it('renders the list with the data returned by api', async () => {
    const mockReturnValue = [
      {
        some: "value",
      }
    ];
    (AssignmentService.findByStatus as jest.Mock<any, any>)
      .mockResolvedValue(mockReturnValue);

    const container = render(<AssignmentListContainer status="new"/>);

    // wait until api fetches data
    await waitForElement(() => container.queryByText('Text I would expect after api call'));

    // make assertions
    expect(container.asFragment()).toMatchSnapshot();
  });