0

这是我要测试的反应类。我正在使用Content.Provider以保持全局状态。在我的测试文件中，我将其命名为<Store>.

import { useEffect, useContext } from "react";
import { Context } from '../../config/Store';

const ProjectPage = () => {
    const [globalState, dispatch] = useContext(Context);

    useEffect(() => {
        getAllProjectData();
    }, []);

    const getAllProjectData = async () => {
        console.log('### getAllProjectData - ProjectPage.jsx')
        try {
            const data = await getProjectData();
            dispatch({ type: 'setIsLoaded', payload: true })
            dispatch({ type: 'setError', payload: false })
            dispatch({ type: 'setProjectDetails', payload: data })
        } catch (error) {
            console.log("### Error: ", error)
            dispatch({ type: 'setProjectDetails', payload: null })
            dispatch({ type: 'setIsLoaded', payload: true })
            dispatch({ type: 'setError', payload: true })
        }
    }

    if (globalState.error) {
        return <div><ErrorPage /></div>;
    } else if (!globalState.isLoaded) {
        return <div className="spinnerContainer" data-testid="spinnerContainer" 
                  <CircularProgress className="spinner" color="error" size="3rem" thickness={7} />
               </div>;
    } else {
        return <div id="projectToolbar" data-testid="projectTabBar" className="container-fluid"></div>;
    }
}

export default ProjectPage;

然后我有这个test.js文件，其中第一个测试成功，第二个测试失败。

import Store from '../../config/Store';
import ProjectPage from './ProjectPage';
import { render } from '@testing-library/react';

test('renders the spinner before the project page', () => {
    const { getByTestId } = render(<Store><ProjectPage /></Store>);
    const spinnerContainer = getByTestId("spinnerContainer");
    expect(spinnerContainer).toBeInTheDocument();
});

test.only('renders the project tab bar', async () => {
    render(<Store><ProjectPage /></Store>);
    const projectTabBar = await waitFor(async () => await screen.findByTestId("projectTabBar"))
    expect(projectTabBar).toBeInTheDocument();
});

在我的记录器中，测试显示以下内容：

测试结果

如您所见，测试失败，因为data-testid="projectTabBar"不在文档中并且微调器在那里。我知道发生这种情况是因为组件没有呈现数据，但我不明白为什么会发生这种情况以及如何解决它。任何帮助，将不胜感激。

4

1 回答 1

0

您的第一个测试和第二个测试在它们的设置中看起来相同，因此预计它们将返回相同的结果。您看到微调器的原因是在您执行断言时，您的数据仍在加载。您可以采取几种方法。

  1. 测试 的真实实现Store，包括等待你的getAllProjectData函数完成和组件重新渲染。这可能导致不稳定和长时间运行的测试，但会端到端测试组件。查看测试库异步函数文档以了解如何执行此操作，并特别注意超时。

  2. getAllProjectData将函数抽象useEffect到自定义钩子中，然后在组件中使用它。这允许您在测试中模拟自定义钩子的实现，并同步设置Store. 请注意，您仍然需要等待projectTabBar出现，因为在初始渲染Store时不会初始化，但等待应该是短暂且一致的，这会导致更快和更少的 flakey 测试，但您还需要编写单独测试自定义钩子。

于 2022-01-03T12:18:27.337 回答