wrapper.update not working when mocking a custom hook

Current behavior

When mocking a custom hook, the component is not updated when calling wrapper.update().

Example:

component.jsx

import React from 'react';
import useCustomHook from './custom-hook';

export function MyComponent() {
  const hookResult = useCustomHook();

  return <span>{hookResult}</span>;
}

component.test.jsx

import { shallow } from 'enzyme';
import React from 'react';
import { MyComponent } from './component';
import useCustomHook from './custom-hook';

jest.mock('./custom-hook', () => jest.fn(() => 'bananas'));

it('should update the component', () => {
  expect(wrapper.children().text()).toBe('bananas');

  useCustomHook.mockReturnValueOnce('apples');

  wrapper.update();

  expect(wrapper.children().text()).toBe('apples');
})

Expected behavior

The above test passes.

I can get it to work when I replace the wrapper.update() with a wrapper.setProps({}) (which is kinda weird). So why is the component not re-rendering? According to the docs, wrapper.update() is forcing a re-render. But I guess some optimization kicks in here and prevents the re-render.

Your environment

API

• shallow
• mount
• render

Version

library	version
enzyme	3.10.0
react	16.8.6
react-dom	16.8.3
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 ( )

[robertknight]

@marcus13371337 - This issue is nothing to do with hooks. The documentation for wrapper.update is simply incorrect.

From your test cases:

✕ cant handle named export without any updates (17ms)

This is expected. When you changed the mock return value from your hook, the component wasn’t re-rendered and the Enzyme tree was not updated.

✕ cant handle named export with wrapper update (4ms)

This is also expected. wrapper.update() refreshes Enzyme’s view of the rendered component tree, but it doesn’t re-render the component. For that you need wrapper.setProps({}).

---

Thinking about this issue at a higher level, although there are good technical reasons for why Enzyme works the way it does (see the Enzyme v2 => v3 migration guide), this is clearly quite confusing for users. This could perhaps be addressed by providing visual documentation to convey the mental model better, but perhaps there are other changes that could be made to avoid the issue?

[robertknight]

Is that the same “thing” as doing wrapper.mount() or are there any differences between those approaches?

The docs say that wrapper.mount() unmounts and re-mounts the component, whereas setProps({}) re-renders (aka. “updates”) the component with new props, which won’t trigger lifecycle hooks related to mounting and unmounting.