React testing with Hooks not working on State Update

Question

I am trying to write a test case for a functional component which uses hooks for state update and gets data from a mock promise call.

// Functional Component

const MockPage = () => {
  const [mockData, setMockData] = React.useState<IMock[]>([]);
  const mockService = new mockService();

  React.useEffect(() => {
    mockService.getMockData().then((res) => {
      setMockData(res);
    });
  }, []);

  return (
    <div>
      <MockTable mocktData={mockData} />
    </div>
  );
}

Here is the test case that I have written which PASSES :

 it('renders without crashing', () => {
        mount(<MockPage />);
    });

Here are the test cases that I have written which FAILS :

 it('renders without crashing', () => {
       const wrapper =  mount(<MockPage />);
        expect(wrapper.is(MountTable)).toBeDefined();
    });



it('renders without crashing', () => {
           const wrapper =  mount(<MockPage />);
            expect(wrapper.find(MountTable).prop('mockData').toHaveLenght(2);
        }); // assusming the mockData has 2 objects in an array

What is the mistake(s) am committing here? Is there something am missing?

Note: I tried doing with act() too , but was not successful.

You could use debug to see what's actually getting rendered: console.log('wrapper', wrapper.debug()); Also on the last test you're missing a parenthesis before .toHaveLenght(2). — Clarity
– Clarity, Commented Aug 20, 2019 at 12:03

helloitsjoe · Accepted Answer · 2019-08-20 13:02:50Z

1

Your data fetching happens asynchronously, so you need to wait for the promise to resolve before checking your data.

At a minimum (although this won’t always work when you have multiple promises), you can do this:

const wrapper = mount(<MockPage />);

return Promise.resolve().then(() => {
  expect(...).toBe(true);
});

There’s a great library called wait-for-expect that can also help when return Promise.resolve().then(...) isn’t enough:

import waitForExpect from `wait-for-expect`;

const wrapper = mount(<MockPage />);

return waitForExpect(() => {
  expect(...).toBe(true);
});

answered Aug 20, 2019 at 13:02

helloitsjoe

6,5393 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rohan Agarwal Over a year ago

It fails with the following error expect(received).toBe(expected) // Object.is equality Expected: true Received: false

helloitsjoe Over a year ago

That’s not enough information to help debug this. What is received/expected? If those are objects or arrays you will need to use toEqual instead of toBe . You can use your toHaveLength check if that’s simpler.

Collectives™ on Stack Overflow

React testing with Hooks not working on State Update

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related