Testing with React's Jest and Enzyme when async componentDidMount

Question

react:16.3.0-alpha.1
jest: "22.3.0"
enzyme: 3.3.0
typescript: 2.7.1

code:

class Foo extends React.PureComponent<undefined,undefined>{
   bar:number;
   async componentDidMount() {
     this.bar = 0;
     let echarts = await import('echarts'); // async import
     this.bar = 100;
   }
}

test:

describe('...', () => {
  test('...', async () => {
    const wrapper = shallow(<Foo/>);
    const instance = await wrapper.instance();
    expect(instance.bar).toBe(100);
  });
});

Error:

Expected value to be:
  100
Received:
  0

Whj · Accepted Answer · 2018-03-28 07:39:24Z

27

Solution:

1: use the async/await syntax.

2: Use mount (no shallow).

3: await async componentLifecycle.

For ex:

    test(' ',async () => {
      const wrapper = mount(
         <Foo />
      );
      await wrapper.instance().componentDidMount();
    })

edited Mar 28, 2018 at 7:39

answered Mar 28, 2018 at 7:23

Whj

7582 gold badges7 silver badges14 bronze badges

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

3 Comments

VivekN Over a year ago

This is not what you were trying to check in your question posted above.My answer is the right solution to your problem.

MustSeeMelons Over a year ago

This will cause the method to run twice.

Marius Over a year ago

@VivekN has the right solution. This will run "componentDidMount" twice. Any await after mounting will probably "solve" the problem, but it's not the right solution in my opinion.

VivekN · Accepted Answer · 2018-03-22 13:20:34Z

17

Something like this should work for you:-

 describe('...', () => {
   test('...', async () => {
     const wrapper = await mount(<Foo/>);
     expect(wrapper.instance().bar).toBe(100);
   });
 });

answered Mar 22, 2018 at 13:20

VivekN

1,60212 silver badges14 bronze badges

2 Comments

Simon Keep Over a year ago

This was the best solution for me, particularly as I didn't want to shallow mount

Yann Dìnendal Over a year ago

Indeed; and if you have a setState in the component's didMount, you'll need to add wrapper.update(); before the expect.

uberdandy · Accepted Answer · 2018-05-25 05:48:00Z

4

Try this:

it('should do something', async function() {
  const wrapper = shallow(<Foo />);
  await wrapper.instance().componentDidMount();
  app.update();
  expect(wrapper.instance().bar).toBe(100);
});

answered May 25, 2018 at 5:48

uberdandy

411 silver badge3 bronze badges

4 Comments

Max Over a year ago

After looking through google on this problem and trying to implement async componentDidMount through mount's enzyme. And "mount" way is not fit for react native project - I had a lot mistakes. This method helped me. And you don't need to install jsdom and use mount. "react": "16.4.1", "react-native": "0.56.0", "enzyme": "^3.4.4", "jest": "23.5.0"

Pavan Over a year ago

what's app here?

cameck Over a year ago

@Pavan I think wrapper.update() was intended. --ref

cameck Over a year ago

btw, await won't do anything there unless your componentDidMount() returns a promise

Tobias Weibel · Accepted Answer · 2019-10-11 09:36:07Z

4

None of the solutions provided here fixed all my issues. At the end I found https://medium.com/@lucksp_22012/jest-enzyme-react-testing-with-async-componentdidmount-7c4c99e77d2d which fixed my problems.

Summary

function flushPromises() {
    return new Promise(resolve => setImmediate(resolve));
}

it('should do someting', async () => {
    const wrapper = await mount(<Foo/>);
    await flushPromises();

    expect(wrapper.instance().bar).toBe(100);
});

answered Oct 11, 2019 at 9:36

Tobias Weibel

3865 silver badges13 bronze badges

1 Comment

josemigallas Over a year ago

For anybody looking at this, use setTimeout instead of setImmediate.

Ignacio · Accepted Answer · 2018-03-22 07:24:45Z

0

Your test also needs to implement async, await.
For ex:

  it('should do something', async function() {
    const wrapper = shallow(<Foo />);
    const result = await wrapper.instance();
    expect(result.bar).toBe(100);
  });

edited Mar 22, 2018 at 7:24

answered Mar 22, 2018 at 6:52

Ignacio

1,0568 silver badges17 bronze badges

3 Comments

Ignacio Over a year ago

edited, have you tried the await when you execute the instance?, The await basically operates on a promise

Ignacio Over a year ago

if you can share your complete test

cameck Over a year ago

I don't think .instance() returns a promise, so I don't think await is doing anything there. TypeError: wrapper.instance(...).then is not a function

Luca Borrione · Accepted Answer · 2023-09-05 22:54:54Z

0

If you are using jest.useFakeTimers(); then you need to use

await jest.runAllTimersAsync();

instead of the flushPromises solution

answered Sep 5, 2023 at 22:54

Luca Borrione

17.2k8 gold badges57 silver badges66 bronze badges

Collectives™ on Stack Overflow

Testing with React's Jest and Enzyme when async componentDidMount

6 Answers 6

3 Comments

2 Comments

4 Comments

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

2 Comments

4 Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related