Блог

Я не очень хорошо пишу тесты, что касается функций, не связанных с API, я тестировал с помощью JEST с помощью rendererHook, как показано ниже, Пример правильного ТЕСТА:

 import { render, screen, cleanup } from '@testing-library/react';
import useAppDrawer from "../../../utils/hooks/useAppDrawer";
import {act,renderHook} from '@testing-library/react-hooks';
import React from "react";

describe("hook: useAppDrawer", () => {

    afterEach(() => {
        cleanup();
    });

    test('drawer open', () => {
        const {result} = renderHook(useAppDrawer);

        act(()=>{
            result.current.handleDrawerOpen();
        })
        expect(result.current.open).toBe(true);

    });
    test('drawer close', () => {
        const {result} = renderHook(useAppDrawer);

        act(()=>{
            result.current.handleDrawerClose();
        })
        expect(result.current.open).toBe(false);

    });

});
 

Но что мы будем делать в случае вызовов API в ШУТКУ, что все еще сбивает меня с толку. Я все еще не могу понять, как я могу тестировать вызовы API в ШУТКУ, как это показано ниже, Проблемная функция:

 import React, {useContext} from "react";
import request from "../services/Http";
import useIsLoading from "./useIsLoading";
import {Context} from "../store/context/store";
import {SET_BOOTHS} from "../store/context/Constants";

export default function useFetchBooths(){

    const {isLoading, setIsLoading} = useIsLoading()
    const [{booths}, dispatch] = useContext(Context)

    function fetchBooths(){

        setIsLoading(true)

        request.get('/event/get-booth-list')
            .then((res) => {
                setIsLoading(false)
                if (res)
                {
                    dispatch({
                        type: SET_BOOTHS,
                        payload: res.data.booth_data
                    })
                }
            })
    }

    function searchBooths(value){

        if (value)
        {
            let obj = booths.filter(booth => booth.booth_name.toLowerCase().includes(value.toLowerCase()));

            if (obj.length > 0)
            {
                dispatch({
                    type: SET_BOOTHS,
                    payload: obj
                })
            }
            else
            {
                fetchBooths()
            }

        }
        else
        {
            fetchBooths()
        }
    }

    return { booths, fetchBooths, isLoading, searchBooths }
}
 

what would be the possible jest test for the above function? considering cases like if booth is fetched or not as in both cases I am getting booth value to be [].
My attempt so far for this is:

 import { render, screen, cleanup, waitFor } from '@testing-library/react';
import useFetchBooths from "../../../utils/hooks/useFetchBooths";
import {act,renderHook} from '@testing-library/react-hooks';
import React from "react";
import * as requestsModule from "../../../utils/services/Http";
import {Store} from "../../../utils/store/context/store";

describe("hook: useFetchBooths", () => {

    afterEach(() => {
        cleanup();
    });

    test('Booth is fetched', async () => {
        const boothData = [
            {
                "message": "Data fetched Successfully",
                "success": true
            }
        ];
        const wrapper = ({children}) => (
            <Store>{children}</Store>
        )
        const {result } = renderHook(() => useFetchBooths(), {wrapper});
         jest.spyOn(result.current, "fetchBooths").mockResolvedValue(boothData);
         console.log(result.current.fetchBooths())
        await expect(result.current.fetchBooths()).resolves.toEqual([{ "success": true, "message": "Data fetched Successfully" }]);

    });

});
 

Выше тест пройден, но это издевались по API(я создаю данные и сравнивая его с моим собственным письменных данных, но это не я хочу), но я хочу, чтобы мой фактический API работает или нет в этот тест, как я извлечения Бут список в fetchBooths() функцию, так как я могу проверить его с притворным API, когда мои все зависит от реального API, который я хочу протестировать его, проверив мой фактический API на самом деле работает или нет в том, что тест с помощью некоторых асинхронный/ждут , но я сильно застрял в этой точке. Кроме того, я не могу понять, каким будет тестовый случай для функции Searchboots, поскольку она выглядит неопределенной и список стендов отображается как [], хотя это не должно быть [], я все еще не могу найти решение. Пожалуйста, помогите мне написать эти тестовые примеры

В своем тестовом коде используйте a spy для макетирования модуля запросов:

 import * as requestsModule from "../services/Http";

describe("hook: useFetchBooths", () => {

    afterEach(() => {
        cleanup();
    });

    test('Booth is fetched', async () => {

        jest.spyOn(requestsModule, 'get').mockResolvedValue([]) // <-- here you should provide the data you want your hook to see.

        const wrapper = ({children}) => (
            <Store>{children}</Store>
        )

        const {result } = renderHook(() => useFetchBooths(), {wrapper});
        await act(async () => {
            await waitFor(() => result.current.fetchBooths() )
        })

        await act(async () => {
            await waitFor(() => result.current.booths )
            console.log(result.current);
        })
        expect(result.current.booths).toEqual([]);

    });

});
 

Обновление: как издеваться над useContext

1. создайте пользовательский крючок

 // boothsContext.js

import {Context} from "../store/context/store";

export const useBoothsContext = () => useContext(Context)

 

2. издевайтесь над крючком, используя jest.spyOn :

 import { wait } from '@testing-library/react'
import * as BoothsContextModule from './boothsContext.js'

...

test('Booth is fetched', async () => {
    const mockDispatch = jest.fn()
    const data = { booths: []} // change this to inject different data into your hook result
    jest.spyOn(BoothsContextModule, 'useBoothsContext')
        .mockReturnValue([data, mockDispatch])

    // perform test steps

   await wait(() => expect(mockDispatch).toHaveBeenCalledWith({
      type: SET_BOOTHS,
      payload: {...} // <-- expected payload you want to assert
   }))