Testing functional components using state hooks with Enzyme about rfcs HOT 20 CLOSED

React now officially supports hooks as of today 🙂 https://reactjs.org/blog/2019/02/06/react-v16.8.0.html. Is there an eta when enzyme will support them? Thanks 🙏

from rfcs.

For anyone here Kent Dodd's react-testing-library has got ya covered ( demo )

EDIT: As mentioned in the original issue mount works, just not shallow

from rfcs.

I hope it will. Enzyme is pretty known as a testing library for React but it misses support for some features (memo, lazy, hooks).

from rfcs.

@geoffdavis92 You don't need either lib. You can just use act() from react-dom.

from rfcs.

Enzyme / shallow rendering wants information about things that not even React knows about unless the component is fully mounted. Perhaps it needs its own Babel plugin to add metadata to elements.

from rfcs.

@dankreiger I had the same problem, and investigated a little;
The problem is that for using hook react need to have a "Dispatcher" which is not declared on shallow renderer (even for 'react-test-renderer/shallow' 16.7.0)

from rfcs.

Enzyme currently does not support hooks.

from rfcs.

In order to support Hooks in enzyme's shallow, we have to add Hooks support into ShallowRenderer(react-test-renderer/shallow).

from rfcs.

@milesj is this fixed now?

from rfcs.

@itaditya No. Just take a look at Enzyme itself. https://github.com/airbnb/enzyme/blob/master/CHANGELOG.md

from rfcs.

Wasn't able to find it in the changelog. Thanks for helping though. I tried to use enzyme yesterday, it said can't call hook outside component body.

from rfcs.

@itaditya that is normal. Nor React nor Enzyme did fix the bug yet. And that is not a bug, it's just not implemented yet :)

from rfcs.

@Dane456 nope it can't shallow render. Besides, kent created this lib because Hé don't really like the shallow approach. (render instead of shallow, and Enzyme can do it)

from rfcs.

@ChibiBlasphem yeah you're right, that was already mentioned in the original issue. Didn't see that. I wonder if there are any performance differences between enzyme's mount and react-testing-library's render

from rfcs.

This is good to know. I've been sitting here trying to get useEffect to fire for like an hour. Guess I'll migrate to r-t-l until Enzyme catches up.

from rfcs.

Workaround with react-test-renderer: enzymejs/enzyme#1938 (comment)

This is my final working test:

import React from 'react'
import { shallow } from 'enzyme'
import { OverlayComponent } from './../index'
import ShallowRenderer from 'react-test-renderer/shallow'

describe('<OverlayComponent />', () => {
  it("doesn't explode with a workaround", () => {
    const renderer = new ShallowRenderer()
    renderer.render(<OverlayComponent show closeFn={jest.fn()} t={key => key} />)
    const output = renderer.getRenderOutput()
    const wrapper = shallow(<div>{output}</div>) // Have to wrap it, otherwise you get: TypeError: ShallowWrapper can only wrap valid elements
    expect(wrapper).toMatchSnapshot()
  })
})

from rfcs.

@maciossek I haven't seen issues with rendering, it's mainly the hooks not doing anything at all. A simpler workaround might just be using mount and unmount instead of shallow.

from rfcs.

I might try it with the next test, but I got the same Invariant Violation: Hooks ... error: It didn't render at all.

from rfcs.

I've managed to test a custom hook using @maciossek's workaround along with act().
https://gist.github.com/goncalobo/ace875af564d4fd585651abd86f65cd2

from rfcs.

This thread is full of confusion because:

• It references missing support for Hooks in shallow renderer which has been fixed in a stable release
• There is however a bug that causes state to not update in shallow renderer which has not been fixed yet
• There's a whole separate issue of which APIs are provided by enzyme

Ultimately this is a repository for proposing API changes and not for bug reports. This is why your messages don't receive a response, and why this thread is so confused with half-broken workarounds.

I will lock it to prevent further confusion. If something doesn't work in React please file an issue in the React repository instead. There we can discuss it and suggest the correct fix.

from rfcs.