React hooks support checklist

[chenesan]

Sorry for removing issue template. Since the React 16.8 is out we can start to work on hooks support in enzyme now. Previously I tried to open PR in #2008 to help with this but found out that there are too many apis in React hooks. After some thinking I feel it's better to track all of the supports / PR in one issues, and create one PR for each hooks api (useState, useEffect, etc).

• useState (Testing Hooks with shallow: Invariant Violation #1938, Testing Hooks with mount: onChange not called #1996, Test case PR [Tests] add hooks tests #2008 hooks testcase written #2029 [Hooks Testing] Added Test cases for useState, useEffects & customHooks  #2041)
• useEffect (Test case PR Wrap mount renderer render with reactTestUtils.act() #2034 [Hooks Testing] Added Test cases for useState, useEffects & customHooks  #2041 ; Currently not work in shallow renderer, see Add option in shallow renderer to run effects/componentDidUpdate/componentDidMount facebook/react#15275)
• useContext (Test case PR [Hooks Testing] Added Test cases for useState, useEffects & customHooks  #2041)
• useReducer (Test case PR [Hooks Testing] Added Test cases for useState, useEffects & customHooks  #2041)
• useCallback (Test case PR React hooks test case part 3 -- useCallback #2148)
• useMemo (Test case PR React hooks test case part 2 -- useMemo #2144)
• useRef (Testing Hooks with shallow: Invariant Violation #1938, Test case PR Add useRef, useImperativeHandle, useDebugValue tests #2162)
• useImperativeHandle (useImperativeHandle callback never called (when rendering w/ enzyme) #2039, Test case PR Add useRef, useImperativeHandle, useDebugValue tests #2162)
• useLayoutEffect (Test case PR React hooks test cases part 1 -- useLayoutEffect #2121)
• useDebugValue(Test case PR Add useRef, useImperativeHandle, useDebugValue tests #2162)
• custom hooks (Testing Hooks with mount: onChange not called #1996)

known issues (some are resolved with newer version of react):

• setState returned from useState not works with shallow before [email protected] . Fixed in [Shallow] Implement setState for Hooks and remount on type change facebook/react#15120 .
• useEffect and useLayoutEffect not works with shallow because react shallow renderer doesn't run it. (Add option in shallow renderer to run effects/componentDidUpdate/componentDidMount facebook/react#15275)
• useCallback doesn't memoize callback in react shallow renderer (useCallback doesn't memoize callback in shallow renderer facebook/react#15774)

Currently I'm working in useState (#2008) and I'm glad to see if anyone else would like to help to support other apis. For now we need to add many tests to make sure what is working in enzyme, and what is not, then add patch / feature into it. I can help to maintain the above checklist if there are any related issues / PR .

I'm simply volunteer to do this and not a main maintainer here though so @ljharb if you have had any plan / schedule on this feel free to tell me and I can change or close this :-)

[kii-dot]

Thanks for making this list @chenesan!
@ljharb, I'm interested in tackling some of this features too. It might take me some time to finish implementing it as I'm getting a little busy in the next two weeks, but I am very interested in helping out.
I've currently worked on two test cases #2029

If no one has took up the useEffect feature. I would like to try that out!

[chenesan]

Hi @k3ithl1m glad to see your work :) FYI I just open #2034 to wrap render function of mount renderer with act(). That should be related to useEffect test cases and I hope that help!

[venikx]

@chenesan Also note that React seemed to have an issue with shallow rendering hooks right now. Not sure if it was addressed by the React time already or not.

[nixstrom]

@AnaRobynn Didn't they solve this with facebook/react#14567 ?

[venikx]

@nixstrom It’s supported, but there are issues apparantly. I saw Dan tweeting about it yesterday: https://twitter.com/dan_abramov/status/1103304963445403648?s=21

[chenesan]

I think the issue should be facebook/#14841, which #2008 would depends on.

[pgangwani]

@chenesan @k3ithl1m : Added test cases #2041 for useEffect, useState & custom hooks along with combination of those. Will add few more soon. I was thinking to get some support as a focus (micro) team for react hooks test cases considering all scnerios.

[pgangwani]

@chenesan : Please add #2041 in custom hooks checklist item as I added test case in that PR

[pgangwani]

@ljharb @chenesan : Simple hooks testing is successful in mount rendering without act :)
Example: https://codesandbox.io/s/5xkjk1ql14

[chenesan]

@pgangwani I believe the test could pass without act. However when it comes to setting state in useEffect without act wrapping and assert the state changes after mount (like test case of #2034 ), it would fail. Since #2034 is merged this should be fine to mount render without act(), though.

[pgangwani]

How about chatApi test case in #2041 ? It's kinda controlled simulated useEffect.

…

On Mon 11 Mar, 2019, 7:49 AM Yi-Shan, Chen, ***@***.***> wrote: @pgangwani <https://github.com/pgangwani> I believe the test could pass without act. However when it comes to setting state in useEffect without act wrapping and assert the state changes after mount (like test case of #2034 <#2034> ), it would fail. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2011 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ANpzLB19jqg5FssvbU77A2xTUbvkv42zks5vVb0tgaJpZM4arphX> .

[chenesan]

I'm not sure if that would pass without act wrap. but since we wrap mount with act in master now, this should be fine I think.

[pgangwani]

its not working by taking latest commits into my branch

…

On Mon, Mar 11, 2019 at 8:03 AM Yi-Shan, Chen ***@***.***> wrote: I'm not sure if that would pass without act wrap. but since we wrap mount with act in master now, this should be fine I think. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2011 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ANpzLJo3wMWma5_idYB6IKFvcm_r17P1ks5vVcBegaJpZM4arphX> .

[pgangwani]

@chenesan : [Update]: Added test cases for useReducer & useContext. Few custom hooks too

[tlginn]

Are there any updates on when useMemo will be supported with shallow rendering?

Specifically I'm rendering a connected react-redux component. Since react-redux is now relying on hooks, I'm getting the "Invalid hook call" when it attempts to call useMemo.

I can workaround using mount for now, but would prefer to keep all of my tests using shallow.

[ljharb]

@tlginn in the next release of enzyme, hopefully.

[charesbast]

Any news on releasing a version with partial hooks support ? latest release is from 10 Jun... 😢

[skyboyer]

Any news on releasing a version with partial hooks support ? latest release is from 10 Jun... 😢

believe it's blocked by facebook/react#15275

[dschinkel]

Is it safe to say that Enzyme Shallow still doesn't work on React Hooks?

[ljharb]

@dschinkel no, because that suggests zero support - neither does it have full support.

[manveers96]

I'm facing issues with .dive() method after upgrading to styled-components v5.0.0 and jest-styled-components v7.0.0 and it was working fine earlier before the upgrade.
The issue I'm facing is related to Hooks:

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:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app
    See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Do we not have support for hooks with .dive()? Any help would be appreciated @chenesan @ljharb

[ljharb]

As far as I'm aware, they should work the same in .dive() as they do in shallow(), since that's all it does.

[manveers96]

@ljharb Correction - I'm facing issues with .dive() as well as .shallow() after upgrading to styled-components v5.0.0 and jest-styled-components v7.0.0.
Anyone else facing similar issue?
Any suggestions how to fix this?

[ljharb]

What changed in the underlying implementation in v5 versus v4?

[manveers96]

@ljharb As per the styled components changelog (https://github.com/styled-components/styled-components/blob/master/CHANGELOG.md#v500---2020-01-13), there seems to be no mention in relation to hooks. I'm not sure of what might be causing the issue.

[ljharb]

Clicking on styled-components/styled-components@v4.4.1...v5.0.0, however, shows a commit called "reimplement using hooks", so it's likely that this is the issue.

[josh08h]

This PR suggests useState works with the shallow API.. a few of us are seeing that's not the case here. Can someone please clarify?

[csalvato]

useEffect (Test case PR #2034 #2041 ; Currently not work in shallow renderer, see facebook/react#15275)

This is currently marked as completed, but I am still getting a console.error when using mount with a useEffect hook.

"enzyme": "^3.11.0",
"react": "^16.13.1",

In my case, useEffect is handling a promise, and then updating the state of the component:

useEffect(() => {
    axios
      .get(`/users/${userId}`)
      .then(response => setFields(response.data.data.attributes))
      .catch(err => console.error('Failed to load user profile', err))
  }, [])

This is the error I get:

  console.error node_modules/react-dom/cjs/react-dom.development.js:88
    Warning: An update to ProfileFeature inside a test was not wrapped in act(...).
    
    When testing, code that causes React state updates should be wrapped into act(...):
    
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */
    
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
        in ProfileFeature (at ProfileFeature.spec.js:41)
        in Router (at ProfileFeature.spec.js:40)
        in Provider (created by WrapperComponent)
        in WrapperComponent

Is this something on your radar? Or am I doing something incorrectly?

[jzipfler]

I will post a summary for those that came across this issue because of the problem with shallow renderer in enzyme.

The issue from facebook/react#15275 is not completed as mentioned in the comment above, it was just closed because of facebook/react#17321.

Issue facebook/react#17321 is closed as well, because as a outcome the react-shallow-renderer was extracted so that it is no longer part of the react project so that it can be enhanced/developed independently from the react team.

It seems that the project is now located under https://github.com/NMinhNguyen/react-shallow-renderer.
In addition there is a issue (enzymejs/react-shallow-renderer#16) in this new project, asking to transfer the shallow renderer into the github enzyme org.

Hopefully I summarized that correctly. For more, detailed or maybe more correct information, have a look on the linked issues/projects.

[dschinkel]

Continuing on @jzipfler 's summary.

The problem still remains that we can't test the public API of a React Hook (custom methods we choose to carefully expose to be part of it) via shallow render. People can't test off instance() which a lot of us do, and found solid ways to do that safely. There's a huge bandwagon of "don't test implementation details" and that is such a vague and misunderstood concept. Testing implementation details is relative to how you're writing your tests and your components and many of us, prefer not to be forced to test always through heavy imperative Shell (DOM wiring and events) just to gain confidence and design feedback especially when we TDD and code very leanly.

The Second problem is we shouldn't have to rely on Jest as a hack to get around shallow shortcomings. I come from a land where mocking everything is a big smell. Mocking Angular via TestBed, enough said. We should be able to test a lib like React with whatever testing framework we want. They keep forcing Jest mocking, etc. I don't wanna keep hearing that I must use Jest.

So for me, we're still forced to test everything through DOM wiring, which is not ideal for shallow. This is still not resolved really.

facebook/react#17321 (comment)

[dschinkel]

@dschinkel no, because that suggests zero support - neither does it have full support.

@ljharb We really need to know what exactly this means. What is supported, what does not zero actually mean? Is there a checklist that thoroughly explains the what and gaps in the current version of enzyme rather than try to guess here? Can we be a little more detailed here?

I probably won't give up on this until someone finds a way to either push React or work on a way that allows you to truly test under the skin with React Hooks. I personally don't have time to contribute on a whole new repo to do so.

[danielo515]

I see many people only mentions shallow. Are hooks supposed to work with mount? If so, what are the requirements? I am getting react errors for almost every test where any of the nested components uses any hook (useEffect, useState, etc).
Are there any guidelines or requirements on how to test components that contain hooks?