Проверьте условия и используйте эффект в React with Jest

Question

Мне нужно написать тест со следующими шагами:

1. получить данные пользователя при монтировании
2. получить сведения о проекте, если он выбрал Project и clientId при их изменении
3. получить сведения о страницах, если он выбрал selectedProject, clientId и selectedPages, когда они изменяются
4. отображать содержимое внутри Switch
5. , если не имеет clientId, содержимое должно возвращать ноль
6. если не было selectedProject, Контент должен возвращать Projects
7. , если нет selectedPages, Контент должен возвращать Pages
8. , иначе Контент должен отображать 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, некоторые для отправки действий и некоторые условные выражения.

Я пытаюсь углубиться в тестирование сШут и Фермент.Когда я искал подходы к тестированию, тестировал useEffect, переменные и условия, я ничего не нашел.Все, что я видел, это тестирование, если текст изменяется, нажата ли кнопка и т. Д., Но как насчет тестирования компонентов, которые ничего не меняют в DOM, просто загружают данные и, в зависимости от этих данных, визуализируют компонент?

Answer 1

В чем тут вопрос?Что вы пробовали?Мне кажется, довольно просто проверить:

• Используйте Enzymes mount или shallow, чтобы визуализировать компонент, назначить его переменной и обернуть в провайдере магазина, чтобы он имел доступ кredux store.
• Используйте jest.mock, чтобы высмеивать вещи, которые вы не хотите, чтобы они действительно происходили (например, рассылка действий), или используйте что-то вроде redux-mock-store .
• Используйте этот компонент ".find", чтобы получить нужную кнопку.
• Подтвердите, что при заданном состоянии избыточности он отображается правильно.
• Утверждение, что действия отправляютсяс надлежащим типом и полезной нагрузкой в ​​нужное время.
• Вам может потребоваться вызвать component.update (), чтобы заставить его повторно выполнить рендеринг в рамках ферментного теста.

Дайте мне знать, если у вас есть более конкретные проблемы.Удачи!