Enzyme: Testing Hooks with shallow: Invariant Violation

[TdyP]

Current behavior

When testing component which contains newly released React Hooks using shallow, it crashes:
Invariant Violation: Hooks can only be called inside the body of a function component.

Everything works fine at run time or when testing with render:

My test component:

import * as React from 'react';

function Test() {
    const [myState, setMyState] = React.useState('Initial state');

    const changeState = () => setMyState('State updated');

    return (
        <div>
            {myState}
            <button onClick={changeState}>Change</button>
        </div>
    );
}

export default Test;

My test file:

import { shallow } from 'enzyme';
import * as React from 'react';
import Test from './Test';

it('renders without crashing', () => {
    const comp = shallow(<Test />);

    expect(comp.find('Test')).toMatchSnapshot();
});

Error stack trace:

Invariant Violation: Hooks can only be called inside the body of a function component.

    at invariant (node_modules/react/cjs/react.development.js:125:15)
    at resolveDispatcher (node_modules/react/cjs/react.development.js:1450:28)
    at Object.useState (node_modules/react/cjs/react.development.js:1473:20)
    at Test (src/Test.tsx:4:11)
    at node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:440:38
    at ReactShallowRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:412:39)
    at node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:444:37
    at withSetStateAllowed (node_modules/enzyme-adapter-utils/build/Utils.js:137:16)
    at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:443:70)
    at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:206:22)
    at Object.shallow (node_modules/enzyme/build/shallow.js:21:10)
    at Object.<anonymous> (src/Test.test.tsx:6:18)
        at new Promise (<anonymous>)
    at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Expected behavior

Tests should run

Your environment

Fresh create-react-app-typescript install with react 16.7.0-alpha-0

API

• [x] shallow
• [ ] mount
• [ ] render

Version

| library | version
| ------------------- | -------
| enzyme | 3.8.0
| react | 16.7.0-alpha.0
| react-dom | 16.7.0-alpha.0
| react-test-renderer |
| adapter (below) |

Adapter

• [x] 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 ( )

[ljharb]

Hooks are not yet in a non-alpha version, and are definitely not yet supported in enzyme.

I'd suggest waiting to use them until they're not experimental.

[oliviertassinari]

@ljharb Hooks are labeled "upcoming" now 🤔.

[ljharb]

Fair enough, but they’re still both not yet a thing in a real version, and enzyme doesn’t yet have support for them.

[juniusfree]

An open issue in react facebook/react/#14091

[juniusfree]

An open issue in react facebook/react/#14091

Merged at facebook/react#14567

[ljharb]

Reopening, since https://github.com/facebook/react/pull/14679 is now merged and v16.8 seems imminent.

Also tracked in #1553.

[chenesan]

@ljharb I'd love to help to look into what we need to do to support hooks after v16.8 release.
Also note that in facebook/react#14567 the shallow renderer will support hooks, so maybe there won't be too much work in enzyme.

[ljharb]

@chenesan that would be great. The biggest priority is getting as many tests as possible, and mirroring those as much as possible between shallow and mount.

[joshnabbott]

Hooks have been released and this still seems to be an issue with enzyme's shallow renderer. Is there any sort of ETA on getting an update to enzyme to support hooks?

[chenesan]

I don't know if there's any ETA for supporting hooks but I'll start to work on this in recent days :-)

[ljharb]

If it’s still an issue with every React package (including the test renderer) at 16.8, then a PR with tests would be quite welcome.

[wodenx]

I am having a possibly related issue with 16.8. I don't get the Invariant Violation, but some hooks which persist data across renders (useRef and useState) are not behaving as expected during shallow render, but work fine during mount.

Versions:

├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

Tests:

import * as React from 'react';
import { shallow, mount } from 'enzyme';

class ClassInstance extends React.Component {
  constructor(props) {
    super(props);
    this.id = Math.random().toString();
  }

  render() {
    return <div>{this.id}</div>;
  }
}

const SFCRef = () => {
  const id = React.useRef(Math.random().toString());
  return <div>{id.current}</div>;
};

const SFCState = () => {
  const [id] = React.useState(Math.random().toString());
  return <div>{id}</div>;
};

test('1 class instance property persists with shallow', () => {
  const wrapper = shallow(<ClassInstance foo="a" />);
  const id = wrapper.text();
  wrapper.setProps({ foo: 'b' });
  const id1 = wrapper.text();
  expect(id).toBe(id1);
});

test('2 class instance property persists with mount', () => {
  const wrapper = mount(<ClassInstance foo="a" />);
  const id = wrapper.find('div').text();
  wrapper.setProps({ foo: 'b' });
  const id1 = wrapper.find('div').text();
  expect(id).toBe(id1);
});

test('3 SFC ref persists with mount', () => {
  const wrapper = mount(<SFCRef foo="a" />);
  const id = wrapper.find('div').text();
  wrapper.setProps({ foo: 'b' });
  const id1 = wrapper.find('div').text();
  expect(id).toBe(id1);
});

test('4 SFC ref persists with shallow', () => {
  const wrapper = shallow(<SFCRef foo="a" />);
  const id = wrapper.text();
  wrapper.setProps({ foo: 'b' });
  const id1 = wrapper.text();
  expect(id).toBe(id1);
});

test('5 SFC state persists with mount', () => {
  const wrapper = mount(<SFCState foo="a" />);
  const id = wrapper.find('div').text();
  wrapper.setProps({ foo: 'b' });
  const id1 = wrapper.find('div').text();
  expect(id).toBe(id1);
});

test('6 SFC state persists with shallow', () => {
  const wrapper = shallow(<SFCState foo="a" />);
  const id = wrapper.text();
  wrapper.setProps({ foo: 'b' });
  const id1 = wrapper.text();
  expect(id).toBe(id1);
});

// Verify that an id which *should not* persist across renders in fact does not.
const SFC = () => {
  const id = Math.random().toString();
  return <div>{id}</div>;
}

test('7 SFC alone does not persist with mount', () => {
  const wrapper = mount(<SFC foo="a" />);
  const id = wrapper.find('div').text();
  wrapper.setProps({ foo: 'b' });
  const id1 = wrapper.find('div').text();
  expect(id).not.toBe(id1);
});

test('8 SFC alone does not persist with shallow', () => {
  const wrapper = shallow(<SFC foo="a" />);
  const id = wrapper.text();
  wrapper.setProps({ foo: 'b' });
  const id1 = wrapper.text();
  expect(id).not.toBe(id1);
});

Results:

  ✓ 1 class instance property persists with shallow (8ms)
  ✓ 2 class instance property persists with mount (31ms)
  ✓ 3 SFC ref persists with mount (3ms)
  ✕ 4 SFC ref persists with shallow (11ms)
  ✓ 5 SFC state persists with mount (2ms)
  ✕ 6 SFC state persists with shallow (2ms)
  ✓ 7 SFC alone does not persist with mount (3ms)
  ✓ 8 SFC alone does not persist with shallow

[ljharb]

@wodenx what version of react-test-renderer do you have?

[wodenx]

@ljharb lol i was just checking that - i just upgraded from 16.8.0 to 16.8.1 and have the same results.

[icyJoseph]

Has anyone managed to pull out a magic trick to use Hooks, with Enzyme, shallow or mount?

[TdyP]

@icyJoseph I managed to get this working by upgrading everything around react and testing:
```
"enzyme": "3.8.0"
"enzyme-adapter-react-16": "1.9.1",
"react": "16.8.1",
"react-dom": "16.8.1",
"react-test-renderer": "16.8.1",

[icyJoseph]

@TdyP I have all of those libraries updated, and still I cannot get a simple toggle to work.

In your example at the top, how do you trigger the state change when using the onClick prop?

I target the prop and call the function attached to it, using the act helper, but the state does not update.

[TdyP]

@icyJoseph Here's a working example with mount. Didn't manage to get it working with shallowactually

The component Test.tsx

import * as React from 'react';

function Test() {
    const [myState, setMyState] = React.useState('initial_state');

    const changeState = () => setMyState('updated_state');

    return (
        <div>
            <div className="stateContent">{myState}</div>
            <button onClick={changeState}>Change</button>
        </div>
    );
}

export default Test;

Test file Test.test.tsx

import { mount } from 'enzyme';
import * as React from 'react';
import Test from './Test';

it('renders without crashing', () => {
    const comp = mount(<Test />);

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

    expect(comp.find('div.stateContent').text()).toBe('updated_state');
});

Hope this helps!

[stringerbell]

This works for now. You need to add react-test-renderer if it's not already a dependency.

const ComponentWithHooks = () => {
  const [count, setCount] = useState(0);
  return <p onClick={() => setCount(count + 1)}>Count is {count}</p>;
};
describe('ComponentWithHooks', () => {
  it('explodes', () => {
    const wrapper = shallow(<ComponentWithHooks />); // Invariant Violation: Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)
  });

  it("doesn't explode with a workaround", () => {
    const renderer = new ShallowRenderer();
    renderer.render(<ComponentWithHooks />);
    const output = renderer.getRenderOutput();
    const wrapper = shallow(<div>{output}</div>); // Have to wrap it, otherwise you get: TypeError: ShallowWrapper can only wrap valid elements
    // ...
  });
});

[icyJoseph]

This works for now. You need to add react-test-renderer if it's not already a dependency.

const ComponentWithHooks = () => {
  const [count, setCount] = useState(0);
  return <p onClick={() => setCount(count + 1)}>Count is {count}</p>;
};
describe('ComponentWithHooks', () => {
  it('explodes', () => {
    const wrapper = shallow(<ComponentWithHooks />); // Invariant Violation: Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)
  });

  it("doesn't explode with a workaround", () => {
    const renderer = new ShallowRenderer();
    renderer.render(<ComponentWithHooks />);
    const output = renderer.getRenderOutput();
    const wrapper = shallow(<div>{output}</div>); // Have to wrap it, otherwise you get: TypeError: ShallowWrapper can only wrap valid elements
    // ...
  });
});

I think, the invariant problem goes away if you just change that arrow function in ComponentWithHooks for a regular JS function. The problem comes down the line in the testing because shallow rendered components do not update the state through the hooks. Only mount does that.

[stringerbell]

@icyJoseph ah gotcha -- I misunderstood what was wanted based on the invariant violation issue in here (and what I was running into)

[gaearon]

Can somebody please create an example project demonstrating what doesn't work? On the React side, we expect shallow rendering a component with Hooks to work just fine.

[icyJoseph]

@gaearon I have this sandbox.

There you can find a Counter inside Hooks.

With these two tests.

The enzyme test fails, the one using your suggested approach passes.

[EricLambrecht]

I get ShallowWrapper::setState() can only be called on class components if i try to setState on a functional component that uses the useState hook.

[ZilvinasAbr]

@EricLambrecht makes sense because there can be multiple setState hooks. There would be no way to know on which hook you are setting the state.

[EricLambrecht]

@ZilvinasAbr ~Well I thought internally the component still keeps track of only one state object and all uses of the useState hook just add or update a property in the usual legacy state.~

Oh, but I get your point now. The naming of these properties is not known... So will this be forever untestable with enzyme or did someone already figure out a clever solution to this problem?

[ljharb]

@EricLambrecht not forever, but certainly not yet.

My suggestion is that if you need to explicitly test your state changes, that you continue using class components instead of migrating to the very very new and as-of-yet unsupported by enzyme hooks.

[gaearon]

@icyJoseph

From what I can tell, the problem with the shallow test in https://github.com/airbnb/enzyme/issues/1938#issuecomment-467027468 is unrelated to the title of this issue ("Hooks can only be called inside the body of a function component"). This is why this issue is confusing to me.

It would be great if there were separate issues for separate problems. This particular issue ("Hooks can only be called inside the body of a function component") has already been fixed in React.

The issue you're seeing (state update doesn't trigger re-render) is a bug in React shallow renderer. We're tracking it in https://github.com/facebook/react/issues/14840.

As for Enzyme's setState helper — indeed, I don't see it working with components using Hooks. Components using Hooks may have arbitrary number of internal states. The intended testing strategy for them is that you trigger the actual interactions that call those state setters rather than call them directly.

[ljharb]

There's a possibility of enzyme tracking which hooks are used, and providing an API to interact with them directly, but that wouldn't come any time soon, if at all.

[joepuzzo]

So It looks like the temporary solve for this is to write some tests without enzyme.. such as this test However, it seems using this approach is very limited, because the react test tools don't even allow you to query for components by name such as MyCustomComponent which i would argue is a very powerful feature in enzyme. And what i mean when i say "react test tools don't even allow you to query for components by name" is that using the approach suggested relies on the documents rudimentary query selection.

[ljharb]

@joepuzzo the temporary workaround is to not use hooks yet, if you find yourself unable to properly test with them.

[dfee]

There's a possibility of enzyme tracking which hooks are used, and providing an API to interact with them directly, but that wouldn't come any time soon, if at all.

@joepuzzo the temporary workaround is to not use hooks yet, if you find yourself unable to properly test with them.

Alternatively, the temporary (permanent? see the first quote) workaround is to find another testing framework / pattern that supports hooks.

[VincentLanglet]

Agree, it's not a good practice to modify code strictly for testing it.

We just have to find another framework/pattern to test hooks. (Or make PR to improve enzyme)

[joepuzzo]

so it looks like my issue goes away when I upgrade react-test-renderer to the latest version. After reading more into these issues i found this https://github.com/facebook/react/pull/14567 and realized my issue was simply because i was relying on [email protected]. That all being said I do agree that the title of this issue is a little confusing because it seems like the case initially described in the first comment works just fine now.

[ljharb]

@joepuzzo certainly react-test-renderer always has to have the exact same minor version as react and react-dom - there's still some outstanding bugs in react-test-renderer itself around shallow rendering and hooks, however.

[YevgenSnuffkin]

If you use Jest with Enzyme used it with shallow like this:

import { setHookState } from 'utils/test'
import { ComponentWithHook } from './ComponentWithHook'
import { NeededComponent } from './NeededComponent'

const reactMock = require('react')

describe('ComponentWithHook component', () => {
    it('should render itself', () => {
        reactMock.useState = setHookState({
            data: [],
            isFetching: false
        })
        const wrapper = shallow(<ComponentWithHook/>)

        expect(wrapper.find(<NeededComponent>).exists()).toEqual(true)
    })
})

, where the setHookState is:

export const setHookState = (newState: {}) => jest.fn().mockImplementation((state: {}) => [
    newState,
    (newState: {}) => {}
])

hope it helps someone

[apiel]

Since it seem that there is still no support of hook with shallow, I am using similar solution as @YevgenSnuffkin

```
it('should update state on click button', async () => {
const mockSetState = jest.fn();
(React.useState as jest.Mock) = jest.fn((initial: any) => [initial, mockSetState]);

    const wrapper = shallow(<MyComponentWithHook />);
    wrapper.find('button').simulate('click);

    expect(mockSetState).toBeCalledTimes(1);
});

```
But would be really cool to have a solution where shallow could work with hook.

[bryanski]

Upgrading react-test-render as @joepuzzo said fixed my problem.

[ljharb]

Closing since this seems resolved by the latest react-test-renderer.

Happy to reopen if that's not the case.

[aemc]

@ljharb isnt that more of an alternative rather than a fix?

[ljharb]

@asmc there is no alternative to upgrading react-test-renderer that I’m aware of; enzyme depends on it heavily.

[apiel]

@ljharb I use [email protected] but I was not able to test React.useState with enzyme shallow. When I set a new state the wrapper is not updated. Should I create a new issue or can we consider that the problem is related to this issue?

(In case this issue has been solve, could you provide an example)

[gaearon]

As I already wrote earlier, state not updating is a separate bug in React. It has already been fixed in master, but the fix is not released yet. This bug has nothing to do with Enzyme. You'll see the fix in the next React release (either 16.8.5 or 16.9.0).

[ljharb]

@apiel do feel free to open a new issue for that; enzyme can add tests for it whether we can fix it or not.

[gaearon]

I'm cutting 16.8.5 now. It includes the shallow rendering fixes.

I verified that Enzyme suite passes, and that applying https://github.com/airbnb/enzyme/pull/2014 on top of 16.8.5 will also fix all cases @wodenx collected in https://github.com/airbnb/enzyme/issues/1938#issuecomment-461276294 (thanks for that!)

If something's still broken please file an issue. Thanks.

[bdwain]

I was able to test a simple component that called useState and useEffect, so things seem to work well now. Thanks @gaearon.

[melounek]

useState works with shallow already, thanks!
but useEffect still behaves differently with mount and shallow:

import React, { useEffect, useState } from 'react';
import { mount, shallow } from 'enzyme';

export const MyComponent = () => {
  const [value, setValue] = useState('');
  useEffect(() => {
    setValue('effected');
  }, []);
  return (
    <div>
      <button onClick={() => setValue('clicked')} />
      <span>{value}</span>
    </div>
  );
};

describe('With mount()', () => {
  const wrapper1 = mount(<MyComponent />);
  wrapper1.find('button').simulate('click');
  it('changes value', () => expect(wrapper1.find('span').text()).toContain('clicked'));

  const wrapper2 = mount(<MyComponent />);
  it('calls useEffect', () => expect(wrapper2.find('span').text()).toContain('effected'));
});

describe('With shallow()', () => {
  const wrapper1 = shallow(<MyComponent />);
  wrapper1.find('button').simulate('click');
  it('changes value', () => expect(wrapper1.find('span').text()).toContain('clicked'));

  const wrapper2 = shallow(<MyComponent />);
  it('calls useEffect', () => expect(wrapper2.find('span').text()).toContain('effected'));
});

With mount()
    ✓ changes value (4ms)
    ✓ calls useEffect (1ms)
  With shallow()
    ✓ changes value (1ms)
    ✕ calls useEffect (8ms)
---
Expected string:
      ""
    To contain value:
      "effected"

btw: useLayoutEffect have the same issue

[bryanski]

Even with React 16.8.5, useEffect still doesn't work with shallow. This coincides with @melounek's comment above. Any workaround?

[palaniichukdmytro]

It is still does not work fome with latest 16.8.5 react changes,
currentTab event after simulate click does not rerender, but props I pass to onChange come correctly

const historyTables = {
    0: <TableOne/>,
    1: <TableTwo />,
}

export const TabPage= ({classes}) => {
    const [currentTab, setTab] = useState(Number(Object.keys(historyTables)[0]))

    let table = historyTables[currentTab]

    return (
                <Tabs
                    value={currentTab}
                    onChange={(e, currentTab) => setTab(currentTab)}
                    TabIndicatorProps={{classes: {colorSecondary: classes.tabIndicator}}}
                >
                    {Object.keys(historyTypes).map(type =>
                        <Tab
                            label={<FormattedMessage id={`common.${type.toLowerCase()}`} />}
                            name={type.toLowerCase()}
                            classes={{textColorPrimary: classes.tabPrimary}}
                        />
                    )}
                </Tabs>
                {table}
            </div>
        </Page>)

}



describe('<HistoryPage />', () => {
    let historyPage, tabs
 beforeEach(() => {
        historyPage = shallow(<HistoryPage classes={{}} />)
        tabs = historyPage.find(Tabs)
    })

    Object.keys(historyTables).forEach(tab => {
        it.only('should change tabs onChange', () => {
            historyPage.find(Tabs).simulate('click', null, tab)

            historyPage.find(Tabs).props().value.should.be.equal(Number(tab))
        })
    })
})

[gaearon]

but useEffect still behaves differently with mount and shallow

useEffect still doesn't work with shallow

It is expected that shallow won't call useEffect — just like shallow rendering never invoked componentDidMount or componentDidUpdate.

This is by design because code in them is usually not resilient to shallow rendering. If you want to test effects, you probably want to use mount (and possibly mock out some child components that you don't want in your test).

---

currentTab event after simulate click does not rerender, but props I pass to onChange come correctly

File a new issue in React repo if you think it's a React bug. A repository with reproducing case would be very helpful.

[bdwain]

enzyme runs componentDidMount and componentDidUpdate on shallow also by default as of v3 (#678), but it looks like the implementation is specific to class components and not supported by shallow renderer itself. I just reran my test for useEffect and verified it's not working as expected. When I call setProps, it seems to just rerender a brand new component rather than updating the existing one.

I feel like it would be nice if react's shallow renderer at least let you opt-in to calling useEffect, if not doing it by default. But I guess I can file that issue in react rather than here.

[gaearon]

I see. This is a bigger discussion about what shallow renderer should do — but since it's Enzyme that decides to run these lifecycles, it makes sense for Enzyme to decide on how to handle them. Maybe you could file a new issue? Thanks.

[bdwain]

@gaearon Yea I was planning on filing an issue with React. Are you saying file the issue with enzyme instead because the react shallow renderer should not run the effects? I am worried that this can't be solved with just enzyme, which is why I was planning on filing the issue with react.

It sounds like it would be difficult for enzyme to keep track of the effects without digging into internals of react because the effects are usually just anonymous functions inside a component (whereas in classes it can call instance.componentDidUpdate() or something). Similar to how keeping track of state from useState is difficult since there's not one single state object.

This is by design because code in them is usually not resilient to shallow rendering. If you want to test effects, you probably want to use mount (and possibly mock out some child components that you don't want in your test).

That made it sound like it was a choice by the react team to not run the effects in the shallow renderer. That's why I was thinking it would be nice if it exposed some option to enable running effects on an opt-in basis, where you are aware of the potential side effects. If I'm wrong and it's a big effort to do it from react then that might change things, but it seemed like the best approach to me.

[icyJoseph]

@gaearon I have this sandbox.

There you can find a Counter inside Hooks.

With these two tests.

The enzyme test fails, the one using your suggested approach passes.

I updated this toy project, and enzyme-shallow still fails. What am I missing?

[bdwain]

I created a react issue for this

[koszatnik12]

@bdwain Hi :)
You wrote, that you've been able to run a simple test with useState, I've alse written one simple case and unfortunately it did not work. Maybe you know what is wrong here or maybe it is some React bugs - I am not sure, and I don't want to create new issue if it is only my mystake

   import React, { useState } from 'react';

    const TestComponent = () => {
        const [myState, setMyState] = useState('1234');

        return (
            <>
                <input onChange={({ target: { value } }) => setMyState(value)} />
                <p>{myState}</p>
            </>
        );
    };
    export { TestComponent };

    describe('Test Copoment', () => {
        it('should change myState value on input change', () => {
            // Given
            const testComponent = shallow(<TestComponent />);
            const { onChange } = testComponent.find('input').props();

            // Then 
            expect(testComponent.find('p')).toHaveText('1234');

            // When
            act(() => {
                onChange({ target: { value: '8658' } });
                components.update();
            });

            // Then 
            expect(testComponent.find('p')).toHaveText('8658');
        });
    });

// Text is still 1234 (initial state)

[palaniichukdmytro]

@koszatnik12 I have the same, with enzyme. I updated to lates 16.8.5 but simple unit test with useState does not work for me.

[ljharb]

@koszatnik12 there’s a few unreleased changes that might address your problem, but also, there’s no components defined in your example. If you’re still having trouble after the next release, please file a new issue.

[alexanderkjeldaas]

@ljharb which release is that?

[ljharb]

@alexanderkjeldaas the next one.

[kamyaD]

Updating everything solved the problem for me:
"devDependencies": { "enzyme": "^3.9.0", "enzyme-adapter-react-16": "^1.4.0", "eslint": "^5.16.0", "react": "^16.8.6", "react-dom": "^16.8.6", "react-test-renderer": "^16.6.2" }

[yuritoledo]

any update?

[0xdevalias]

I know it's been said a number of times above, but the main part of the suggested solutions for me was to force yarn to force the resolution of react-test-renderer to match my react version:

• https://yarnpkg.com/lang/en/docs/selective-version-resolutions/#toc-how-to-use-it

So I basically ended up with:

..snip..
"dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.12.1",
},
"resolutions": {
    "react-test-renderer": "^16.8.6"
  }
}

[ljharb]

you don’t even have to do that if your lockfile has the right one.

[jnelken]

You can follow the progress here (useEffect with shallow): https://github.com/airbnb/enzyme/issues/2086

[yuritoledo]

And about onChange with hooks?

[ljharb]

v3.10.0 has now been released.

[EduardoAC]

I am having some trouble to test with shallow render the useState

{
  "jest": "24.8.0",
  "enzyme": "3.10.0",
  "enzyme-adapter-react-16": "1.14.0",
  "enzyme-to-json": "3.3.5",
}

File test is the same used by https://github.com/airbnb/enzyme/issues/1938#issuecomment-479405399

Happy to raise a new issue if this is not the right place

[ljharb]

@EduardoAC a new issue would be very helpful, thanks!

[bob-lee]

I had the same issue and the reason was multiple versions of react-test-renderer

$ yarn why react-test-renderer
yarn why v1.16.0
[1/4] Why do we have the module "react-test-renderer"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "react-test-renderer"
info This module exists because it's specified in "dependencies".
=> Found "enzyme-adapter-react-16#[email protected]"
info This module exists because "enzyme-adapter-react-16" depends on it.
Done in 1.74s.

For some reason, enzyme-adapter-react-16 had an old [email protected] as its own dependency.
I had to remove and add them back:

yarn remove enzyme enzyme-adapter-react-16 react-test-renderer
yarn add enzyme enzyme-adapter-react-16 react-test-renderer

[cagmz]

I was getting intermittent testing failures even after https://github.com/airbnb/enzyme/issues/1938#issuecomment-500637733 . I was able to get my specs passing consistently by doing the following:

yarn upgrade react react-dom --exact
yarn remove enzyme enzyme-adapter-react-16 react-test-renderer
yarn add enzyme enzyme-adapter-react-16 react-test-renderer

Then using Enzyme's mount (instead of shallow) in my failing specs (found after reading this post).

[lucasmonteiro001]

@icyJoseph I managed to get this working by upgrading everything around react and testing:

"enzyme": "3.8.0"
"enzyme-adapter-react-16": "1.9.1",
"react": "16.8.1",
"react-dom": "16.8.1",
"react-test-renderer": "16.8.1",

Thanks a lot @EduardoAC ! It did save me! 😄

[joselcc]

updating enzyme-adapter-react-16 to version 1.15.1 fixed the problem for me

[EduardoAC]

@lucasmonteiro001 you are very welcome

@joselcc great to hear it

[EduardoFLima]

@icyJoseph I managed to get this working by upgrading everything around react and testing:

"enzyme": "3.8.0"
"enzyme-adapter-react-16": "1.9.1",
"react": "16.8.1",
"react-dom": "16.8.1",
"react-test-renderer": "16.8.1",

That worked for me too, thanks !

[bodazhao]

This solution worked for us, but we also realised we did not need react-test-renderer at all, so we removed it from package.json completely

yarn remove enzyme enzyme-adapter-react-16 react-test-renderer
yarn add enzyme enzyme-adapter-react-16

Test cases with Hooks still works

[ljharb]

@bodazhao it comes along with the react 16 enzyme adapter anyways; but it’s version still needs to be the same minor as react and react-dom.