时间戳

首页 > 解决方案 > React - 测试 useContext() 调度值

javascript - React - 测试 useContext() 调度值

问题描述

我在测试 useContext 钩子上的调度值时遇到了麻烦。

我有一个简单的组件：

Connexion.tsx :

    const Connexion = () => {
       const [user, userDispatch] = React.useContext(userContext);
    //...other stuff
    }

我正在寻找在测试中检查调度的值，所以我的测试文件是：

    Connexion.test.jsx :

...
    const renderConnexion = () => {
        return render(
            <userContext.Provider
                value={[
                    {
                        connecte: true,
                        // ...other stuff
                    },
                    () => {}
                ]}
            >
                <Connexion />
            </userContext.Provider>
        );
    };

...

    test("Déconnexion", async () => {
            const component = renderConnexion();
            fireEvent.mouseDown(component.getByTestId("deconnexion"));
        });

在 mouseDown 事件中，一个 dispatchUser({type:"REMOVE"}) 被触发，但我不明白如何在我的测试中测试和接收调度。我知道我必须在我的上下文中修改调度值 (value={[{value}, function to write ]}，但我被卡住了:(

有人能帮我吗 ？

编辑 ：

Reducers :

    export const userReducer = (state: State, action: Action) => {
        switch (action.type) {
            case "UPDATE":
                return {
                    connecte: true,
                    prenom: action.user.prenom,
                    nom: action.user.nom,
                    email: action.user.email,
                    grade: action.user.grade
                };

            case "REMOVE": {
                return { connecte: false };
            }

            default:
                throw new Error();
        }
    };

    export const userInit = { connecte: false };


App : 

const App = () => {
    const [user, userDispatch] = React.useReducer(userReducer, userInit);

    return (            
                <S.ConteneurGlobal>
                    <userContext.Provider value={[user, userDispatch]}>
// ...other stuff
}

感谢您的帮助：D

标签： javascriptreactjstestingreact-hooksreact-testing-library

解决方案

您应该模拟该userDispatch功能

import React from 'react';
import {
  render,
  cleanup,
  fireEvent,
} from '@testing-library/react';

// other imports here eg: userContext.Provider

afterEach(() => {
  cleanup();
  jest.clearAllMocks();
});

const renderConnexion = (mockUserDispatch, mockUser) => {
  return render(
      <userContext.Provider
          value={[
              {
                userDispatch: mockUserDispatch
                // mock other values here by taking them as a parameter
                // for example, for user also take it as parameter
                user: mockUser

              },
              () => {}
             ]}
        >
              <Connexion />
       </userContext.Provider>
     );
};

it('calls dispatchUser when mouseD', () => {
  // Given
  const mockedUserDispatch = jest.fn();
  const mockUser = {}

  // When
  const component = renderConnexion(mockedUserDispatch, mockUser);
  fireEvent.mouseDown(component.getByTestId("deconnexion"));

  // Then
  expect(mockedUserDispatch).toHaveBeenCalled();
});

推荐阅读