在 React with Jest 中测试条件和 useEffect

Question

I need to write a test with the following steps:

1. get user data on mount
2. get project details if it has selectedProject and clientId when they change
3. get pages details if it has selectedProject, clientId, and selectedPages when they change
4. render Content inside Switch
5. if doesn't have clientId, Content should return null
6. if doesn't have selectedProject, Content should return Projects
7. if doesn't have selectedPages, Content should return Pages
8. else Content should render Artboard

And the component looks like this:

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>
    );
};

Where I use some functions to fetch data from firebase, some to dispatch actions, and some conditionals.

I'm trying to get deep into testing with Jest and Enzyme. When I was searching for testing approaches, testing useEffect, variables, and conditions, I haven't found anything. All I saw is testing if a text changes, if a button has get clicked, etc. but what about testing components which aren't really changing anything in the DOM, just loading data, and depending on that data, renders a component?

Answer 1

What's the question here? What have you tried? To me it seems pretty straightforward to test:

• Use Enzymes mount or shallow to render the component and assign that to a variable and wrap it in a store provider so it has access to a redux store.
• Use jest.mock to mock things you don't want to actually want to happen (like the dispatching of actions) or use something like redux-mock-store .
• Use that component ".find" to get the actual button you want.
• Assert that, given a specific redux state, it renders correctly.
• Assert that actions are dispatched with the proper type and payload at the proper times.
• You may need to call component.update() to force it to rerender within the enzyme test.

Let me know if you have more specific issues. Good luck!