React - Testing useContext() dispatch value

Question

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

Can you show your app.js file, so we can see what providers are you using, also the context provider file which you dispatch actions? Also the whole component and tests, because tests are tricky I need to see everything to help :) — onuriltan
– onuriltan, Commented Jan 22, 2020 at 9:10

onuriltan · Accepted Answer · 2020-01-22 09:47:10Z

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

Collectives™ on Stack Overflow

React - Testing useContext() dispatch value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related