Question

我正在尝试为useEffect react钩子编写Jest酶测试用例，但我真的很迷失，我想为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);
  });
});

希望这会有所帮助！

React JS中UseEffect挂钩的Jest测试用例

2 个答案: