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 Feb 01 '21 at 10:36 — evolutionxbox, Feb 01 '21 at 10:36
on line 1: import { navigate } form '@reach/router'; – D Clover Feb 02 '21 at 15:03 — D Clover, Feb 02 '21 at 15:03

score 1 · Accepted Answer · answered Feb 01 '21 at 10:24

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();
});

score 0 · Answer 2 · answered Feb 01 '21 at 08:50

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 01 '21 at 08:50

I_Shayderov

148
3
9

Hi @I_Shayderov unfortunately that didn't work. Although I think that was part of the solution. – D Clover Feb 01 '21 at 10:21

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

2 Answers2