0

I'm writing tests for my React app using Jest and testing-library/react

My tests pass but I can't get rid of this error:

It looks like you're using a version of react-dom that supports the "act" function, but not an awaitable version of "act" which you will need. Please upgrade to at least react-dom@16.9.0 to remove this warning.

I am also seeing multiple instances of this warning:

Warning: An update to ConnectFunction inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

Here are the imports at the top of my test suite:

import React from "react";
import { BrowserRouter } from "react-router-dom";
import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { createMemoryHistory } from 'history';

//testing-library/react
import { render, fireEvent, waitForElement, act } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import {
  wait
} from '@testing-library/dom';
import MyComponent from '../MyComponent';

Here's my package.json

  "dependencies": {
    "axios": "^0.18.1",
    "react": "^16.11.0",
    "react-dom": "^16.9.0",
    "react-scripts": "2.1.5",
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^4.2.3",
    "@testing-library/react": "^9.3.2",
  }

react-dom is already on v16.9. What am I missing?

Frustratingly, this error seems to appear intermittently. As I'm trying different things it will sometimes vanish entirely for a few runs of the test suite and then return.

emersonthis
  • 30,934
  • 52
  • 191
  • 328
  • 1
    Did you try? `rm -rf ./node_modules && npm install` – Long Nguyen Nov 13 '19 at 04:16
  • @LongNguyen Yes I try that periodically but no success. – emersonthis Nov 13 '19 at 17:48
  • 1
    Make sure your `react` and `react-dom` packages are the same versions. – Clarity Nov 13 '19 at 17:56
  • @Clarity I bumped `react-dom` to 16.11 (to match `react`) and that made the "awaitable" error go away. It seems like my question has two different problems so I'm going to split the second art into a new question. If you submit an answer for the issue you just solved I will accept it. – emersonthis Nov 13 '19 at 22:57
  • @Clarity I split the second part off into this new question: https://stackoverflow.com/questions/58847236/react-jest-testing-library-warning-an-update-to-connectfunction-inside-a Ready to accept your answer whenever... – emersonthis Nov 13 '19 at 23:42
  • @Clarity Darn! I spoke too soon... Long story short: when I bumped the `react-dom` version I saw some different errors/warnings in the console but _not_ that one. So I thought it was solved. But after some additional housekeeping to quite those other warnings, the original "awaitable" error came back again. :-/ – emersonthis Nov 13 '19 at 23:56
  • But does the message `Please upgrade to at least react-dom@16.9.0` still appear? – Clarity Nov 14 '19 at 07:25
  • @Clarity Correct. It is the exact same original message, including that sentence. – emersonthis Nov 14 '19 at 08:44

1 Answers1

1

After several days of struggling with this mystery, I finally restarted my computer and the errors/warnings vanished. I don't understand why that mattered, as I had restarted the test script many times, as well as completely re-installed node_modules many times. My best guess is that it had something to do with transitioning from react-test-renderer module to the testing-library wrapper... but that is pure speculation.

  • macOS v10.14.6
  • node v11.10.1
  • npm v6.7.0

Hope this saves someone else some time.

emersonthis
  • 30,934
  • 52
  • 191
  • 328