Testing subsequent function call on an Async function from React function component

Question

I'm trying to test that navigate function is called. I've mocked the component with a jest, but due to the async / promise function it doesn't call the function in time for the test

Component

import React, { useEffect, useState } from 'react';
...
import { Dialog } from '../../../../common/components/Dialog';

const Component = () => {

  ...

  const handleSave= async (value) => {
    const { id } = await newRecord(value);
    navigate(APP_ROUTES.SOMELOCATION(id));
  };

  return (
    <button onClick={() => handleSave(someValue)} />
  );
};

Test

import { navigate } form '@reach/router';
jest.mock('@reach/router');


it('should call navigate when button is clicked', () => {
  wrapper.find('button').simulate('click');
  expect(navigate).toHaveBeenCalled();
});

It does however work if you do: setTimeout(() => { expect(navigate).toHaveBeenCalled() }, 100)

Where is navigate defined?

evolutionxbox
– evolutionxbox

2021-02-01 10:36:12 +00:00
Commented Feb 1, 2021 at 10:36 — evolutionxbox
– evolutionxbox, Commented Feb 1, 2021 at 10:36
on line 1: import { navigate } form '@reach/router';

D Clover
– D Clover

2021-02-02 15:03:18 +00:00
Commented Feb 2, 2021 at 15:03 — D Clover
– D Clover, Commented Feb 2, 2021 at 15:03

D Clover · Accepted Answer · 2021-02-01 10:24:19Z

1

After coming across: Stackoverflow: Flush all promises

I added this to my test and it appears to be passing now. So now my test looks like this:

const flushPromises = () => new Promise(setImmediate);


it('should call navigate when button is clicked', async () => {
  wrapper.find('button').simulate('click');
  await flushPromises();
  expect(navigate).toHaveBeenCalled();
});

answered Feb 1, 2021 at 10:24

D Clover

452 silver badges8 bronze badges

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

Comments

I_Shayderov · Accepted Answer · 2021-02-01 08:50:45Z

0

I think this happend because mouse click is asynchronous, so you should wait until it ends, try this:

it('should call navigate when button is clicked', async () => {
  await wrapper.find('button').simulate('click');
  expect(navigate).toHaveBeenCalled();
});

answered Feb 1, 2021 at 8:50

I_Shayderov

1653 silver badges11 bronze badges

1 Comment

D Clover Over a year ago

Hi @I_Shayderov unfortunately that didn't work. Although I think that was part of the solution.

Collectives™ on Stack Overflow

Testing subsequent function call on an Async function from React function component

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related