Would you consider adding useRef to the shortlist?

@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 :)

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

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

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

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.

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

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

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

I think that the failed shallow test is related to react/react#14840 . After react/react#14841 fixes the issue the test should pass.
As for act() I guess we could wrap the call inside returned render of ReactSixteenAdapter.createMountRenderer. But I'm not sure if this should be included in this PR.

@chenesan we should probably merge the act change in a separate PR first.

@ljharb I would try to work on act() this week with some use cases in https://github.com/threepointone/react-act-examples/blob/master/README.md

(Update: Send PR in #2034)

@ljharb @chenesan : I would like to contribute here. Please help me to get kickstarted. Reading Contributing guide.

Hi @pgangwani glad to hear this. What could I do to help you?
If you're not sure where to start maybe you could find issues with help wanted label. Or maybe you could help add some test cases for react hooks

@pgangwani please post a link to a branch on #2029, and i'll cherry-pick it into that PR.

@ljharb : Is there any chatroom ? As I am new, may need little help to start contributing so kickstart well and try sinking in the pattern to work with you

Hi @pgangwani there is gitter chatroom :-)

@chenesan Added PR #2041 for test cases. Please review

@pgangwani Glad to see your work! I'm not a maintainer here, though. So I have no permission to approve the changes and I think my review doesn't count a lot. Let's wait for @ljharb 's review.

@chenesan @ljharb All these cases are already covered in #2041

@pgangwani good to see #2041 ;)
@ljharb If these cases are included in #2041, should I close this?

@chenesan no; but perhaps you could rebase yours on top of that? I'll keep both open and in sync, and merge them together.

@Acesmndr I believe that works with shallow after [email protected] (See react/react#15120)

@chenesan I tried but even with React v16.8.6 Enzyme V3.9.0 and Enzyme Adapter v1.13.2 The test is failing. Here is a sample file along with its specs.

import React, { useLayoutEffect, useState } from 'react';

type FormElement = React.FocusEvent<HTMLInputElement>;

const NewForm: React.FC = () => {
  const [email, setEmail] = useState<string>('');
  useLayoutEffect(() => {
    console.log('it should be called but isn\'t called', email);
  }, [email]);

  const handleEmailChange = (evt: FormElement) => {
    const emailValue = (evt.target as HTMLInputElement).value.trim();
    setEmail(emailValue);
    console.log('This gets called but the setEmail is not called');
  };
  
  return (
    <form>
      <input
        id="batman"
        value={email}
        onChange={handleEmailChange}
      />
    </form>
  );
};

export default NewForm;

and the specs:

import * as React from 'react';
import { shallow } from 'enzyme';

import NewForm from './test';

describe('Form', () => {
  let container;

  beforeAll(() => {
    container = shallow(<NewForm />);
  });
  describe('email', () => {
    it('sets value', () => {
      container.find('input').prop('onChange')({
        target: {
          value: '[email protected]',
        },
      });
      expect(container.find('input').prop('value')).toEqual('[email protected]');
      // console.log(container.find('input').props());
    });
  });
});

And the error it's throwing is that email isn't updated even though setEmail is called.

Am I doing anything wrong?

@Acesmndr
Have u tried like this?

<input
  id="batman"
  value={email}
  onChange={e => setEmail(e.target.value)}
/>

@yuritoledo Must be one of the dependencies in my project as it didn't work even with that approach. But once I setup everything from scratch using a boilerplate it did indeed work (even my typescript code). :) Must be some rogue npm package which I need to figure out.

I am unable to get shallow working with the useState hook either. Maybe it is because I am using react-native?

My code is as follows:

import React, { useState } from "react";
import { View, Button } from "react-native";
import { shallow } from "enzyme";

const Example = function({ button2Press }) {
const [name, setName] = useState("");

  return (
    <View>
      <Button title="Button 1" onPress={() => setName("Hello")} />
      <Button title="Button 2" onPress={() => button2Press(name)} />
    </View>
  );
};

describe("Example", () => {
  it("updates the state", () => {
    const button2Press = jest.fn();
    const wrapper = shallow(<Example button2Press={button2Press} />)
    const button1 = wrapper.findWhere(node => node.prop("title") === "Button 1")
                        .first();
    const button2 = wrapper.findWhere(node => node.prop("title") === "Button 2")
                        .first();

    button1.props().onPress();
    button2.props().onPress();

    expect(button2Press).toHaveBeenCalledWith("Hello");
  });
});

The error I get is that button2Press is always called with an empty string rather then what is being set in state.

I am using the dependencies:

• react 16.8.6
• react-native 0.59.9
• enzyme 3.9.0
• enzyme-adapter-react-16 1.13.1

@BobaFaux update to enzyme v3.10 and try again. Either way tho, this is a PR to add useState support, so it's likely that until this is merged, it won't work.

@BobaFaux Try to call update() after the first button pressed and find the button2 again:

const button1 = wrapper.findWhere(node => node.prop('title') === 'Button 1')
        .first();
      button1.props().onPress();
      wrapper.update();
      const button2 = wrapper.findWhere(node => node.prop('title') === 'Button 2')
        .first();
      button2.props().onPress(); 
      wrapper.update();
      expect(button2Press).toHaveBeenCalledWith("Hello");

@chenesan thanks that worked for me. I had tried the wrapper.update(); before but my problem was then finding the element again after update is called.

I think those todos are not from this PR originally but the rebased code in #2041 ; I'll look into them to make progress of #2011, though.

@ljharb Just responsed all the comments and also fixed the lint issues. could be reviewed again :-)

It's strange the the statement in describe of useContext test is still running under React v16.2 even though we have describeIf(hasHook, ...) check, which cause ci failed. I just moved common logic outside of it() into it().

@chenesan the describe bodies run even if they're skipped, so they still have to work in all versions.

Hey @chenesan were you able to get this to work for shallow.