1

I'm using Jest to test a file written in react, I'm trying to mock the hooks but for some reason I still fail. I've tried to follow several suggestions (included stackoverflow answers) but nothing is working. I've tried to simplify the code to find my mistake but it still failing.

// myFileToTest.js

import { useContext, useState } from 'react';

export const returnsUseContext = () => {
    return useContext;
};

export const returnsUseState = () => {
    return useState;
};


// myFileToTest.test.js
import React from 'react';
import { returnsUseContext, returnsUseState } from './myFileToTest';

describe('test 1', () => {
    let realUseContext;
    let useContextMock;
    beforeEach(() => {
        realUseContext = React.useContext;
        useContextMock = React.useContext = jest.fn();
        
    });
    // Cleanup mock
    afterEach(() => {
        React.useContext = realUseContext;
    });
    
    it('first try', () => {
        expect(returnsUseContext()).toBe(useContextMock);
    });
});

describe('test 2', () => {
    beforeEach(() => {
        jest.spyOn(React, 'useState').mockReturnValue({
            name: 'hello'
        });
    });

    it('second try', () => {
        const useStateMock = jest.spyOn(React, 'useState');
        expect(returnsUseState()).toBe(useStateMock);
    });
});

and are both failing. Am I making any silly mistakes?

skyboyer
  • 22,209
  • 7
  • 57
  • 64
Raffaele
  • 737
  • 7
  • 21
  • useContext is named import but you're trying to mock it on default React import. Use jest.mock to mock the module. You may not want to do this at all. * Testing Library is currently a preferable way to test functional components and hooks. – Estus Flask Mar 07 '21 at 14:37
  • What is the reason to mock these? Can’t you use the context provider and just pass test data through “value”? Also, would the tests you have be considered testing implementation details? If so, Check out Kent C Dodds article on avoiding implementation details – Nathan Hall Mar 07 '21 at 15:05
  • ☝️Above comment referring to something like... https://polvara.me/posts/mocking-context-with-react-testing-library – Nathan Hall Mar 07 '21 at 15:11
  • Thanks @NathanHall I've found something similar, but I don't know how to adapt it to shallow instead of render (enzyme methods). Unfortunately I cannot use render. – Raffaele Mar 07 '21 at 15:48
  • I can send you an example I use. I also use enzyme. However, I don’t use shallow. – Nathan Hall Mar 07 '21 at 15:49
  • Thanks @EstusFlask, I've tried to follow the code I've found here: https://stackoverflow.com/questions/54691799/how-to-test-a-react-component-that-is-dependent-on-usecontext-hook and in other online suggestions related to mock hooks, but I see always example with `jest.fn`, never `jest.mock`. Can you send me some link to any example? – Raffaele Mar 07 '21 at 15:58
  • How are you mounting? You mentioned shallow earlier. I think this could help: https://stackoverflow.com/questions/63758170/jest-enzyme-test-error-with-react-context-api – Nathan Hall Mar 07 '21 at 16:03
  • This is what I mean https://stackoverflow.com/a/61144701/3731501 . There should be jest.fn but it needs to be inside jest.mock. Notice that if it's used as React.useState, etc instead of named import in other places, this will need to be mocked differently. Again, mocking useState and useContext isn't a good idea because they may behave differently from original ones. – Estus Flask Mar 07 '21 at 17:47

0 Answers0