react JS中UseEffect钩子的Jest测试用例

Question

我正在尝试为useEffect react钩子编写Jest-enzyme测试用例，我真的迷路了，我想为2个react钩子写测试用例，一个进行异步调用，另一个使用usestate钩子对数据进行排序和设置，我的文件在这里。

export const DatasetTable: React.FC<DatasetTableProps> = ({id, dataset, setDataset, datasetError, setDataSetError}) => {
    const [sortedDataset, setSortedDataset] = useState<Dataset[]>();

    useEffect(() => {
        fetchRegistryFunction({
            route:`/dataset/report?${constructQueryParams({id})}`,
            setData: setDataset,
            setError: setDataSetError
        })();
    }, [id, setDataset, setDataSetError]});

    useEffect(() => {
        if(dataset) {
            const sortedDatasetVal = [...dataset];
            sortedDatasetVal.sort(a, b) => {
                const dateA: any = new Date(a.date);
                const dateA: any = new Date(a.date);
                return dataA - dateB;
            }
            setSortedDataset(sortedDatasetVal);
        }
    }, [dataset])

    return (
        <div>
            <DatasetTable
                origin="Datasets"
                tableData={sortedDataset}
                displayColumns={datasetColumns}
                errorMessage={datasetError}
            />

        </div>
    );
}

Answer 1

酶不是这种测试的合适的库。

https://react-hooks-testing-library.com/就是您所需要的。

在你的例子中，我会将所有的数据提取到一个“自定义钩子”中，然后独立于你的UI表示层进行测试。

通过这样做，您可以更好地分离关注点，并且您的自定义挂钩可以在其他类似的react组件中使用。

Answer 2

我设法让酶与数据获取useEffect挂钩一起工作。但是，它确实要求您允许将dataFetching函数作为道具传递给组件。

下面是我测试您的组件的方法，考虑到它现在接受fetchRegistryFunction作为支持：

const someDataSet = DataSet[] // mock your response object here.

describe('DatasetTable', () => {
  let fetchRegistryFunction;
  let wrapper;

  beforeEach(async () => {
    fetchRegistryFunction = jest.fn()
      .mockImplementation(() => Promise.resolve(someDataSet));

    await act(async () => {
      wrapper = mount(
        <DatasetTable
          fetchRegistryFunction={fetchRegistryFunction}
          // ... other props here
        />,
      );
    });

    // The wrapper.update call changes everything, 
    // act seems to not automatically update the wrapper, 
    // which lets you validate your old rendered state
    // before updating it.
    wrapper.update(); 
  });

  afterEach(() => {
    wrapper.unmount();
    jest.restoreAllMocks();
  });

  it('should display fetched data', () => {
    expect(wrapper.find(DatasetTable).props().tableData)
      .toEqual(someDataSet);
  });
});

希望这能有所帮助！