`useEffect` not called when the component is `shallow` renderered

[jlandic]

Current behavior

useEffect fonction does not seem to be executed when the component is rendered with shallow.

Given the following simple component using useEffect hook to call a method given as a prop:

import React, { useEffect } from 'react';

export const MyComponent = ({ callback }) => {
  useEffect(() => {
    callback('Say something');
  });

  return <div>Hello world!</div>;
};

And the following tests checking that the callback function is indeed called accordingly:

import React from 'react';
import { shallow, mount } from 'enzyme';
import { MyComponent } from '../MyComponent';

describe('MyComponent', () => {
  describe('shallow render', () => {
    it('should call callback when shallow rendered', () => {
      const callback = jest.fn();
      shallow(<MyComponent callback={callback} />);
      expect(callback).toHaveBeenCalled();
    });
  });

  describe('mount', () => {
    it('should call callback when mounted', () => {
      const callback = jest.fn();
      mount(<MyComponent callback={callback} />);
      expect(callback).toHaveBeenCalled();
    });
  });
});

We observe that the method is called as expected when "mounted", but not when using a shallow renderer:

 FAIL  src/tests/MyComponent.test.js
  MyComponent
    shallow render
      ✕ should call callback when shallow rendered (12ms)
    mount
      ✓ should call callback when mounted (24ms)

  ● MyComponent › shallow render › should call callback when shallow rendered

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

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

       8 |       const callback = jest.fn();
       9 |       shallow(<MyComponent callback={callback} />);
    > 10 |       expect(callback).toHaveBeenCalled();
         |                        ^
      11 |     });
      12 |   });
      13 |

      at Object.toHaveBeenCalled (src/tests/MyComponent.test.js:10:24)

You may find this reproducible example here.

Expected behavior

When using shallow to render the components, the function passed to useEffect should be executed, as it is when using mount.

Your environment

API

• shallow
• mount
• render

Version

library	version
enzyme	3.9.0
react	16.8.6
react-dom	16.8.6
react-test-renderer	16.8.6
adapter (below)

Adapter

• enzyme-adapter-react-16
• enzyme-adapter-react-16.3
• enzyme-adapter-react-16.2
• enzyme-adapter-react-16.1
• enzyme-adapter-react-15
• enzyme-adapter-react-15.4
• enzyme-adapter-react-14
• enzyme-adapter-react-13
• enzyme-adapter-react-helper
• others ( )

[vinicius33]

Same here. Do you have any idea when this is going to be supported? 🙏
Thanks,

[ljharb]

Hopefully in the next version of enzyme.

[bdwain]

Was there a plan to support that? I made an issue in react to support this from the shallow renderer with an option. I figured that would be the only way to do it without trying to mock out useEffect or something

[ljharb]

ah, fair enough - you're right that it still won't work in shallow, and that that issue, or mocking it out in enzyme, would be the only way to make it work.

[mangel0111]

Is there a plan or PR to fix this? Makes hard include hoos/useEffect if we can't test it

[bdwain]

@mangel0111 see the previous 2 comments. we're waiting to see if we can add a feature to react which will make it easier to fix this

[tomasro27]

Having the same issue here. Is there any alternative to creating a snapshot that runs the useeffect hooks?

[MM263]

setTimeout(() => {
  expect(yourFunction).toHaveBeenCalledTimes(1);
});

This appears to work

Edit: This doesn't work at all, just skips over the test. Waiting for a solution to this now too.

[gonzofish]

@MM263 make sure that the setTimeout callback is even firing. Your test is probably passing because it isn't reaching the assertion in time

[MM263]

@gonzofish We've just discovered this, you are totally right! Thank you!

[insidewhy]

It looks like the render and update calls just need to be called inside an act() callback and this will flush the effects, whether using shallow rendering or not. I have this working in a hacked together enzyme now. EDIT: I made a mistake, implemented the feature below though.

[bdwain]

Are you sure? With useEffect. The implementation of use it in shallow is just a noop so that would be surprising.

…

On Sun, Jul 21, 2019 at 6:49 AM James Pike ***@***.***> wrote: It looks like the render and update calls just need to be called inside a ReactTestUtils.act() callback and this will flush the events, whether using shallow rendering or not. I have this working in a hacked together enzyme now. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2086>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA6MGDRAM45GH5FRNTH5E33QAPMDVANCNFSM4HEGYKHQ> .

[insidewhy]

@bdwain Sorry I had a bunch of changes to ReactShallowRenderer which I was supposed to remove before adding the act() wrapper. Actually the act() wrapper changed nothing. It's not that hard to make the change but react maintainers don't seem to be interested at the moment.