New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Support React hooks `useState` #2008

Open
wants to merge 2 commits into
base: master
from

Conversation

6 participants
@chenesan
Copy link
Contributor

chenesan commented Feb 7, 2019

This PR adds support for [basic hooks API] (https://reactjs.org/docs/hooks-reference.html#basic-hooks) (useState, useEffect, useContext, related issue #1938 #1996). Currently I'm not sure what hooks API is already working in enzyme shallow / mount and what isn't, so I'll start from adding test cases to confirm the current supports. I'll try to finish the following checklist in the next few days. Also tell me if it's better to have single PR for each api :-)

  • useState
    • mount
      • get value from hooks
      • set value from hooks and rendered element should be updated
    • shallow
      • get value from hooks
      • set value from hooks and rendered element should be updated

I've added some test cases for useState and found it doesn't work in shallow to setState.

(Updated: Created a checklist in #2011 to try to track any issue / PR in hooks, and concentrate on support useState in this PR)

@wodenx

This comment has been minimized.

Copy link

wodenx commented Feb 7, 2019

Would you consider adding useRef to the shortlist?

@chenesan chenesan referenced this pull request Feb 8, 2019

Open

React hooks support checklist #2011

0 of 11 tasks complete

@chenesan chenesan changed the title [WIP] Support React hooks [WIP] Support React hooks `useState` Feb 8, 2019

@chenesan

This comment has been minimized.

Copy link
Contributor Author

chenesan commented Feb 8, 2019

@wodenx I just created #2011 to try to track all of the hooks API support. And in this PR I'd like to work on useState. Feel free to open issue / PR for useRef :)

@ljharb ljharb added this to v16.8+: Hooks in React 16 Feb 8, 2019

expect(wrapper.find('div').length).to.equal(1);
expect(wrapper.find('div').text()).to.equal('0');
});
it('handles setState returned from useState', () => {

This comment has been minimized.

@ljharb

ljharb Feb 8, 2019

Member
Suggested change Beta
it('handles setState returned from useState', () => {
it('handles setState returned from useState', () => {
describeIf(is('>= 16.8'), 'hooks', () => {
it('handles useState', () => {
const ComponentUsingStateHook = () => {
const [count] = React.useState(0);

This comment has been minimized.

@ljharb

ljharb Feb 8, 2019

Member

this should be pulled in react-compat, and not accessed off of React.

@perrin4869

This comment has been minimized.

Copy link

perrin4869 commented Feb 8, 2019

Hm... Any clue how you'll get this working? The upstream shallow renderer doesn't seem to support this

@hisapy

This comment has been minimized.

Copy link

hisapy commented Feb 8, 2019

Hi ...

I just upgraded to React v16.8.1 and I started having these warnings when testing a Hooks based component.

console.error ../../node_modules/react-dom/cjs/react-dom.development.js:506
    Warning: An update to _default 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

Is this something that should be handled by enzyme? I didn't have these warnings when I was at the Hooks alphas

@ljharb

This comment has been minimized.

Copy link
Member

ljharb commented Feb 8, 2019

@hisapy enzyme has zero support for hooks right now; as for the warnings, that's because react added them between the alphas and the real release.

@hisapy

This comment has been minimized.

Copy link

hisapy commented Feb 8, 2019

Thx for the quick answer @ljharb ... I wish I could get rid of the warnings ...

Right now I'm trying to use act to see where it takes me.

Just for the record, I'm not actually testing the hooks. My component useState but in my tests I just mount the component and do the usual simulate stuff, like I would without hooks.

@chenesan

This comment has been minimized.

Copy link
Contributor Author

chenesan commented Feb 9, 2019

@perrin4869 I'd try to see what I can do in react shallow renderer.

@Jessidhia

This comment has been minimized.

Copy link

Jessidhia commented Feb 18, 2019

act() should be used by any React code that may interact with state, whether you use hooks or not (it'll be important for ConcurrentMode too). It's expected to be reexported and/or automatically wrapped by testing libraries. See https://github.com/threepointone/react-act-examples/blob/master/README.md

@ljharb

This comment has been minimized.

Copy link
Member

ljharb commented Feb 18, 2019

It seems like something enzyme could/should perhaps abstract away from the user?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment