CODEWITHSUNDEEP
javascriptreactjstestingreact-hooksreact-testing-library
Guarn
Guarn

Reputation: 82

React - Testing useContext() dispatch value

I'm in trouble with testing a dispatch value on a useContext hook.

I have a simple component:

Connexion.tsx :

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

And i'm looking to check the value of a dispatch in a test, so my test file is :

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

On the mouseDown event, a dispatchUser({type:"REMOVE"}) is fired, but i don't understand how to test and receive the dispatch in my test. I know i have to modify the dispatch value in my context (value={[{value}, function to write]}, but i'm stucked :(

Can someone help me ?

EDIT : 

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
}

Thanks for helping :D

Upvotes: 2

Views: 7843

Answers (1)

onuriltan
onuriltan

Reputation: 3898

You should mock the userDispatch function 

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

Upvotes: 3

Related Questions