javascript - React - Testing useContext() dispatch value - Stack Overflow

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

I have a simple ponent:

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 ponent = renderConnexion();
            fireEvent.mouseDown(ponent.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

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

I have a simple ponent:

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 ponent = renderConnexion();
            fireEvent.mouseDown(ponent.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

• javascript
• reactjs
• testing
• react-hooks
• react-testing-library

Share Improve this question Follow edited Jan 22, 2020 at 9:24 Guarn asked Jan 22, 2020 at 8:34 GuarnGuarn 8222 silver badges66 bronze badges 1

• 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 ponent and tests, because tests are tricky I need to see everything to help :) – onuriltan Commented Jan 22, 2020 at 9:10

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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 ponent = renderConnexion(mockedUserDispatch, mockUser);
  fireEvent.mouseDown(ponent.getByTestId("deconnexion"));

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