Having issues using useEffect - Async callback was not invoked ...

[rodrigo398]

What is your question:

I'm trying to test my custom hook, but I can't pass it because I receive the following error:

FAIL  src/components/App/Search/useEntity.test.js (31.695s)
  ● useEntity Testing Custom Hook › useEntity performs GET request

    : Timeout - Async callback was not invoked within the 30000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 30000ms timeout specified by jest.setTimeout.Error:

       6 | 
       7 | describe("useEntity Testing Custom Hook", () => {
   >  8 |   test("useEntity performs GET request", async done => {
          |   ^
       9 |     const mock = new mockAdapter(axios);
      10 | 
      11 |     const mockData = "response";

      at new Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
      at Suite.<anonymous> (src/components/App/Search/useEntity.test.js:8:3)
      at Object.<anonymous> (src/components/App/Search/useEntity.test.js:7:1)

Relevant code or config:

https://gist.github.com/rodrigo398/e50381a3bdb38dabcc8452e9c17d8992

import { renderHook } from "@testing-library/react-hooks";
import axios from "axios";
import mockAdapter from "axios-mock-adapter";

import useEntity from "./useEntity";

describe("useEntity Testing Custom Hook", () => {
  test("useEntity performs GET request", async done => {
    const mock = new mockAdapter(axios);

    const mockData = "response";
    const url = "http://mock";
    mock.onGet(url).reply(200, mockData);

    const { result, waitForNextUpdate } = renderHook(() =>
      useEntity("70695957658")
    );

    expect(result.current.results).toEqual([]);
    expect(result.current.loading).toBeTruthy();

    await waitForNextUpdate();

    expect(result.current.results).toEqual([]);
    expect(result.current.loading).toBeTruthy();
    done();
  }, 30000);
});

Can someone suggest ideas ? Thank you for your help!.

[mpeyper]

The "Async callback" that error is referring to is the done(); call at the end of your test. In fact, in the sandbox I set up with your gist code, the failing line of the test is actually the line before waitForNextUpdate is called.

If you're using a relatively new version of jest (possibly any version, but I'm not sure if it's always been this way), you can omit the done parameter and call all together when writing an async test:

describe("useEntity Testing Custom Hook", () => {
  test("useEntity performs GET request", async () => {
    const mock = new mockAdapter(axios);

    const mockData = "response";
    const url = "http://mock";
    mock.onGet(url).reply(200, mockData);

    const { result, waitForNextUpdate } = renderHook(() =>
      useEntity("70695957658")
    );

    expect(result.current.results).toEqual([]);
    expect(result.current.loading).toBeTruthy();

    await waitForNextUpdate();

    expect(result.current.results).toEqual([]);
    expect(result.current.loading).toBeTruthy();
  });
});

The way, the done() call wont get lost in a missing try/finally around an await (done is only being called if the test passes and the the real error is getting swallowed by the timeout).

[rodrigo398]

Hi @mpeyper . Thanks for your prompt response. I did the changes that you suggested to me, but I still have the same problem:

I'm using:

"babel-jest": "^25.1.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"enzyme-to-json": "^3.4.4",
"jest": "^25.1.0",
"parcel-bundler": "^1.12.4",
"react-test-renderer": "^16.8.0",
"ts-jest": "^25.2.1"

[mpeyper]

What version of react are you using and does it match react-test-renderer?

[rodrigo398]

What version of react are you using and does it match react-test-renderer?

Hi @mpeyper , I'm using:

"react": "^16.8.0",
"react-test-renderer": "^16.8.0",

Do you have any ideas why this doesn't work ?. Thanks.

[mpeyper]

I've seen cases where tests silently fail when react and react-test-renderer versions are out of sync. This is especially common when one is added to the project on a later date to the other. Can you just indulge me and run npm ls react react-test-renderer and share the output with me.

The other thing I notice is that both react and react-test-renderer are below our minimum supported version (^16.9.0). We use the async act feature of 16.9 as part of waitForNextUpdate which might also explain why the test is not behaving as expected.

Other than that, all I can think is that the way the test is failing is presenting itself as a timeout, rather than something actually being wrong. If it helps I was able to get a green test using later versions and making some grand assumptions on what the functionality is meant to be doing. You can see the test passing in this sandbox.

[rodrigo398]

Hi @mpeyper . Thanks for your prompt response.

This is my output:

rodrix@rodrix:trade2 $ npm ls react react-test-renderer
trade1@1.0.0 /home/rodrix/gitrepo/trade2
├─┬ enzyme-adapter-react-16@1.15.2
│ └── react-test-renderer@16.13.0 
├── react@16.13.1 
└── react-test-renderer@16.13.1 

I have updated my versions of react and react-test-renderer to ^16.9.0, but I still keep getting the same error:

Do you have any other new ideas about this behavior?.

Thanks.

[mpeyper]

No, I'm afraid I'm out of ideas.

I suspect the issue will turn out to be something preventing the hook from running as expected (an error, for example) and the state is never updating, preventing waitForNextUodate from resolving.

Have you looked at my sandbox yet? I was able to get a passing test with a few adjustments to the test setup.

[mpeyper]

I've just started to wonder if this issue might be related to #308 somehow? If the error is being thrown in the effect (most likely in this case), then the current error handling won't catch it to resolve and waits either.