Enzyme: Invalid hook call after dynamic `import`

[kapral18]

Description

// Component.ts
import React, {useState} from 'react';
import { someDep } from 'some-dep';

const Component = () => {
  const [count] = useState(0);

  const someResult = someDep(count);

  return <div>{someResult}</div>
}

export default Component

// Component.spec.ts
import { mount } from 'enzyme'
import React from 'react'

describe('Component', async () => {
  beforeEach(() => jest.resetModules())

  it('should ...' () => {
    jest.doMock('some-dep')
                                   // same with require('./Component')
    const { default: Component } = await import(
      './Component'
    )

    const wrapper = mount(<Component />); // errors out here

    expect(...).to...
  })

  it(...)
);

I get a standard invalid hook call error.
Without dynamic imports and with global jest.mock everything works

Current behavior

_Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons..._

Expected behavior

No invalid hook

Your environment

MacOS 10.14.6
ts-jest

API

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

Version

| library | version
| ------------------- | -------
| enzyme | 3.10.0
| react | 16.8.6
| react-dom | 16.8.6
| react-test-renderer | 16.9.0
| adapter (below) | 1.0.5

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]

This seems like it's not an enzyme issue at all, since it's only happening with jest mocks.

Specifically, why are you using import() rather than require?

[kapral18]

@ljharb I added the comment that with require the outcome is the same. ts-jest
dynamic imports seem to correctly give back the imported Component, require as well. The problem is when I pass it into render or mount it blows up. If I just jest.mock globally without dynamic imports it works.

[ljharb]

What happens if you, instead of enzyme, do something like ReactDOM.render(<Component />, document.body)?

[ljharb]

oh. also, mount takes an element, not a component. mount('<Component />), not mount(Component).

[kapral18]

What happens if you, instead of enzyme, do something like ReactDOM.render(<Component />, document.body)?

Thanks for pointing. Let me check.

[kapral18]

oh. also, mount takes an _element_, not a component. mount('<Component />), not mount(Component).

Typo in example. I do pass correct react element. But thanks for pointing out.

[kapral18]

What happens if you, instead of enzyme, do something like ReactDOM.render(<Component />, document.body)?

Just checked. Same error with dynamic require() or import().

[ljharb]

In that case, it's not an enzyme issue at all. It's likely a conflict between React hooks and jest mocking.

Since you now have a reproducible example that doesn't involve enzyme at all, you may want to file a bug on jest and/or react for this.

[kapral18]

In that case, it's not an enzyme issue at all. It's likely a conflict between React hooks and jest mocking.

Since you now have a reproducible example that doesn't involve enzyme at all, you may want to file a bug on jest and/or react for this.

Thanks for helping out and thanks for recommendation. All the best.

[sgb-io]

@kapral18 is there a replacement issue in the react project you could link?

[sepl2604]

@sgb-io I think this should be the related issue: https://github.com/facebook/jest/issues/8987

[kapral18]

@kapral18 is there a replacement issue in the react project you could link?

I didn't create one in react, I did create one though in jest mentioned by @sgb-io

[VanTigranyan]

@kapral18 Hey, did you find any solution? I have the same problem, I have a child component which I would like to mock with doMock but mocking doesn't work without any warning or error.