enzyme icon indicating copy to clipboard operation
enzyme copied to clipboard

Published 20 hours ago • verified publisher icon enzymejs

React hooks support checklist

Open chenesan opened this issue 5 years ago • 55 comments

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).

  • [x] useState (#1938, #1996, Test case PR #2008 #2029 #2041)
  • [x] useEffect (Test case PR #2034 #2041 ; Currently not work in shallow renderer, see facebook/react#15275)
  • [x] useContext (Test case PR #2041)
  • [x] useReducer (Test case PR #2041)
  • [x] useCallback (Test case PR #2148)
  • [x] useMemo (Test case PR #2144)
  • [x] useRef (#1938, Test case PR #2162)
  • [x] useImperativeHandle (#2039, Test case PR #2162)
  • [x] useLayoutEffect (Test case PR #2121)
  • [x] useDebugValue(Test case PR #2162)
  • [x] custom hooks (#1996)

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

  • [x] setState returned from useState not works with shallow before [email protected] . Fixed in https://github.com/facebook/react/pull/15120 .
  • [ ] useEffect and useLayoutEffect not works with shallow because react shallow renderer doesn't run it. (facebook/react#15275)
  • [ ] useCallback doesn't memoize callback in react shallow renderer (https://github.com/facebook/react/issues/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 :-)

chenesan avatar Feb 08 '19 01:02 chenesan

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!

kii-dot avatar Mar 03 '19 20:03 kii-dot

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!

chenesan avatar Mar 06 '19 14:03 chenesan

@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.

venikx avatar Mar 07 '19 13:03 venikx

@AnaRobynn Didn't they solve this with https://github.com/facebook/react/pull/14567 ?

nixstrom avatar Mar 07 '19 15:03 nixstrom

@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

venikx avatar Mar 07 '19 17:03 venikx

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

chenesan avatar Mar 07 '19 23:03 chenesan

@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 avatar Mar 09 '19 14:03 pgangwani

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

pgangwani avatar Mar 10 '19 02:03 pgangwani

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

pgangwani avatar Mar 10 '19 20:03 pgangwani

@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.

chenesan avatar Mar 11 '19 02:03 chenesan

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

On Mon 11 Mar, 2019, 7:49 AM Yi-Shan, Chen, [email protected] 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 https://github.com/airbnb/enzyme/pull/2034 ), it would fail.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/airbnb/enzyme/issues/2011#issuecomment-471382574, or mute the thread https://github.com/notifications/unsubscribe-auth/ANpzLB19jqg5FssvbU77A2xTUbvkv42zks5vVb0tgaJpZM4arphX .

pgangwani avatar Mar 11 '19 02:03 pgangwani

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.

chenesan avatar Mar 11 '19 02:03 chenesan

its not working by taking latest commits into my branch

On Mon, Mar 11, 2019 at 8:03 AM Yi-Shan, Chen [email protected] 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 https://github.com/airbnb/enzyme/issues/2011#issuecomment-471384497, or mute the thread https://github.com/notifications/unsubscribe-auth/ANpzLJo3wMWma5_idYB6IKFvcm_r17P1ks5vVcBegaJpZM4arphX .

pgangwani avatar Mar 11 '19 03:03 pgangwani

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

pgangwani avatar Mar 18 '19 04:03 pgangwani

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.

tlginn avatar Apr 11 '19 19:04 tlginn

@tlginn in the next release of enzyme, hopefully.

ljharb avatar Apr 12 '19 00:04 ljharb

Running enzyme tests using render method keeps spamming my ci test log with Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. has anyone came across it or found a way to make these not appear?

VicJer avatar Apr 15 '19 15:04 VicJer

Hi @VicJer I might try to write some tests around useLayoutEffect to see if we could reproduce the warning :-)

chenesan avatar May 10 '19 13:05 chenesan

@VicJer I found out the warning is because enzyme uses ReactDOMServer.renderToStaticMarkup to stringify the rendered output in enzyme's render(). So when we call useLayoutEffect with the ssr method the warning will alert. Seems the only way to suppress the warning is not to use useLayoutEffect when using render() in test environment. Sorry that I couldn't figure out a better way to handle this :-\

chenesan avatar May 11 '19 01:05 chenesan

Sorry if this isn't helpful but I just want to double check - are other's still unable to shallow render any components with hooks in them or have I just missed something in the various bug reports/questions/responses? Are we still waiting on https://github.com/airbnb/enzyme/issues/2011#issuecomment-482380261 ? I haven't been able to get it working but it might be something on my side.

bencoullie avatar May 15 '19 21:05 bencoullie

@bencoullie shallow renderer doesn't work with useEffect now. See https://github.com/facebook/react/issues/15275 . If you have any other issue around shallow renderer please open a new issue and we can know / fix it.

chenesan avatar May 16 '19 00:05 chenesan

v3.10.0 has now been released.

ljharb avatar Jun 04 '19 00:06 ljharb

Are there any changelog or docs? @ljharb

yuritoledo avatar Jun 04 '19 11:06 yuritoledo

Yes, here. But seems nothing hooks related.

vydimitrov avatar Jun 04 '19 11:06 vydimitrov

@vydimitrov tks

yuritoledo avatar Jun 04 '19 12:06 yuritoledo

Most of the hook-related things are in the react 16 adapter.

ljharb avatar Jun 05 '19 05:06 ljharb

Most of the hook-related things are in the react 16 adapter.

Which doesn't seem to have a changelog at all =( https://github.com/airbnb/enzyme/tree/master/packages/enzyme-adapter-react-16

Hypnosphi avatar Jun 05 '19 10:06 Hypnosphi

I have had a little play and I’ve been able to remove act() in certain situations in tests with components using hooks. But I still need to use it when using useState

MattyBalaam avatar Jun 05 '19 10:06 MattyBalaam

Is the checklist at the top updated, @chenesan ? I'm confused by some of the comments that follow. I can't tell if hooks are supported in Enzyme yet.

tarikhamilton avatar Jun 05 '19 12:06 tarikhamilton

@Hypnosphi the changelog for the adapters is in the version bump commit itself: https://github.com/airbnb/enzyme/commit/dc724f0ee1630a7c9f260906d957b046f6520963

ljharb avatar Jun 05 '19 15:06 ljharb