Question

我需要按照以下步骤编写测试：

在安装时获取用户数据
获取项目详细信息（如果更改时已选择了ProjectProject和clientId）
获取页面详细信息（如果它们在更改时具有selectedProject，clientId和selectedPages）
在Switch内部呈现内容
如果没有clientId，则内容应返回null
如果未选择“项目”，则内容应返回“项目”
如果没有selectedPages，则内容应返回Pages
其他内容应呈现Artboard

该组件如下所示：

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { getUserData } from "../../firebase/user";
import { selectProject } from "../../actions/projects";
import { getItem } from "../../tools/localStorage";
import { getProjectDetails } from "../../firebase/projects";
import { selectPages } from "../../actions/pages";
import Pages from "../Pages";
import Projects from "../Projects";
import Artboard from "../Artboard";
import Switch from "../Transitions/Switch";
import { getUserId, getClientId } from "../../selectors/user";
import { getSelectedProject } from "../../selectors/projects";
import { getSelectedPages, getPagesWithDetails } from "../../selectors/pages";
import { getPagesDetails } from "../../firebase/pages";

const cachedProject = JSON.parse(getItem("selectedProject"));
const cachedPages = JSON.parse(getItem("selectedPages"));

const Dashboard = () => {
    const dispatch = useDispatch();

    const userId = useSelector(getUserId);
    const clientId = useSelector(getClientId);

    const selectedProject = useSelector(getSelectedProject) || cachedProject;
    const selectedPages = useSelector(getSelectedPages) || cachedPages;

    const pagesWithDetails = useSelector(getPagesWithDetails);

    useEffect(() => {
        dispatch(
            getUserData(userId)
        );

        cachedProject && selectProject(cachedProject);
        cachedPages && selectPages(cachedPages);
    }, []);


    useEffect(() => {
        if (selectedProject && clientId) {
            dispatch(
                getProjectDetails(
                    clientId,
                    selectedProject
                )
            );
        }
    }, [selectedProject, clientId]);


    useEffect(() => {
        if (selectedPages && selectedProject && clientId) {

            const pagesWithoutDetails = selectedPages.filter(pageId => (
                !Object.keys(pagesWithDetails).includes(pageId)
            ));

            dispatch(
                getPagesDetails(
                    selectedProject,
                    pagesWithoutDetails
                )
            );
        }
    }, [selectedPages, selectedProject, clientId]);

    const Content = () => {
        if (!clientId) return null;

        if (!selectedProject) {
            return <Projects key="projects" />;
        }

        if (!selectedPages) {
            return <Pages key="pages" />;
        }

        return <Artboard key="artboard" />;
    };

    console.log("Update Dashboard")

    return (
        <Switch>
            {Content()}
        </Switch>
    );
};

我在其中使用一些功能从Firebase提取数据，使用某些功能调度操作以及使用某些条件。

我正在尝试深入研究Jest和Enzyme。当我寻找测试方法，测试useEffect，变量和条件时，我什么都没找到。我所看到的只是测试文本是否更改，按钮是否被单击等，但是测试那些在DOM中并没有真正改变任何内容的组件，只是加载数据并根据该数据渲染一个组件呢？ / p>

Answer 1

这里有什么问题？你尝试了什么？对我来说，测试似乎很简单：

使用酶mount或shallow渲染组件并将其分配给变量，然后将其包装在商店提供程序中，以便它可以访问redux商店。
使用jest.mock来模拟您不希望发生的事情（例如动作的分派）或使用redux-mock-store之类的东西。
使用该组件“ .find”来获取所需的实际按钮。
确认给定特定的redux状态，它可以正确呈现。
声明在适当的时间使用正确的类型和有效负载调度动作。
您可能需要调用component.update（）使其在酶测试中重新呈现。

让我知道您是否还有其他具体问题。祝你好运！

在带有Jest的React中测试条件和useEffect

1 个答案: