Реагирование - Тестирование значения отправки useContext () - PullRequest
Новая
       26

Реагирование - Тестирование значения отправки useContext ()

0 голосов
/ 22 января 2020

У меня проблемы с проверкой значения отправки на хуке 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 для записи ]}, но я застрял: (

Может кто-нибудь помочь мне ?

РЕДАКТИРОВАТЬ: 

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

1 Ответ

0 голосов
/ 22 января 2020

Вы должны издеваться над функцией 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();
});
...