21
// MyComponent.jsx
const MyComponent = (props) => {
  const { fetchSomeData } = props;

  useEffect(()=> {
    fetchSomeData();
  }, []);

  return (
    // Some other components here
  )
};

// MyComponent.react.test.jsx
...
describe('MyComponent', () => {
  test('useEffect', () => {
    const props = {
      fetchSomeData: jest.fn(),
    };

    const wrapper = shallow(<MyComponent {...props} />);

    // THIS DOES NOT WORK, HOW CAN I FIX IT?
    expect(props.fetchSomeData).toHaveBeenCalled();
  });
});



When running the tests I get:

expect(jest.fn()).toHaveBeenCalled()

Expected mock function to have been called, but it was not called.

The expect fails because shallow does not call useEffect. I cannot use mount because of other issues, need to find a way to make it work using shallow.

5 Answers 5

13

useEffect is not supported by Enzyme's shallow rendering. It is on the roadmap (see column 'v16.8+: Hooks') to be fixed for the next version of Enzyme, as mentioned by ljharb

What you're asking is not possible with the current setup. However, a lot of people are struggling with this.

I've solved / worked around this by:

  • not using shallow rendering from Enzyme anymore
  • use the React Testing Library instead of Enzyme
  • mocking out modules via Jest

Here's a summary on how to mock modules, based on Mock Modules from the React docs.

contact.js

import React from "react";
import Map from "./map";

function Contact(props) {
  return (
    <div>
      <p>
        Contact us via [email protected]
      </p>
      <Map center={props.center} />
    </div>
  );
}

contact.test.js

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";

import Contact from "./contact";
import MockedMap from "./map";

jest.mock("./map", () => {
  return function DummyMap(props) {
    return (
      <p>A dummy map.</p>
    );
  };
});

it("should render contact information", () => {
  const center = { lat: 0, long: 0 };
  act(() => {
    render(
      <Contact
        name="Joni Baez"
        email="[email protected]"
        site="http://test.com"
        center={center}
      />,
      container
    );
  });
});

Useful resources:

2
  • Mocking out modules and using React Testing Library is a horrible way to go. A ton of mocks is brittle, good luck with that. We're now forced to test like Angular TestBed, and that's the most crappiest tests out there, full renders, it's just crap Commented Oct 3, 2020 at 1:36
  • 2
    I don't see how this relates to the useEffect issue the OP has Commented Dec 15, 2021 at 14:20
13

Here's a solution from a colleague of mine at CarbonFive: https://blog.carbonfive.com/2019/08/05/shallow-testing-hooks-with-enzyme/

TL;DR: jest.spyOn(React, 'useEffect').mockImplementation(f => f())

6
  • 3
    This useful but if you're using multiple useEffect's in a file then the order of useEffects in the component can impact the outcome of the test. Commented Jan 8, 2020 at 14:24
  • 1
    @TomPinchen -> mockImplementationOnce could be used for each one
    – eazy_g
    Commented Sep 22, 2020 at 19:29
  • again bad to mock all this stuff from the third party, this is a terrible way to write tests. Commented Oct 3, 2020 at 1:36
  • 3
    @PositiveGuy so what is the best way to mock useeffect, or to simulate how to users clicks and state is changed? Commented Dec 15, 2020 at 17:27
  • 1
    @PositiveGuy could you expand on your comment and explain what would be the alternative?
    – Uros C
    Commented Sep 9, 2021 at 7:44
3

shallow doesn't run effect hooks in React by default (it works in mount though) but you could use jest-react-hooks-shallow to enable the useEffect and useLayoutEffect hooks while shallow mounting in enzyme. Then testing is pretty straightforward and even your test specs will pass. Here is a link to a article where testing the use-effect hook has been clearly tackled with shallow mounting in enzyme https://medium.com/geekculture/testing-useeffect-and-redux-hooks-using-enzyme-4539ae3cb545 So basically with jest-react-hooks-shallow for a component like

const ComponentWithHooks = () => {
  const [text, setText] = useState<>();
  const [buttonClicked, setButtonClicked] = useState<boolean>(false);

  useEffect(() => setText(
    `Button clicked: ${buttonClicked.toString()}`), 
    [buttonClicked]
  );

  return (
    <div>
      <div>{text}</div>
      <button onClick={() => setButtonClicked(true)}>Click me</button>
    </div>
  );
};

you'd write tests like

test('Renders default message and updates it on clicking a button', () => {
  const component = shallow(<App />);

  expect(component.text()).toContain('Button clicked: false');

  component.find('button').simulate('click');

  expect(component.text()).toContain('Button clicked: true');
});
1

I'm following this advice and using mount() instead of shallow(). Obviously, that comes with a performance penalty, so mocking of children is advised.

0

Another solution would be mocking useEffect to call its first argument when called:

jest.mock('react', () => ({
  ...jest.requireActual('react'),
  useEffect: f => f(),
}));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.