React-testing-library: React testing library docs' example failing test and logging error

Created on 19 Apr 2020 · 1Comment · Source: testing-library/react-testing-library

Not sure if this is docs or a bug or a combination of both. I'm rather new to this lib but I got to say that I like the way in which it makes me thing about my tests. Thank you!!

The Problem

When following the React example in the docs on a newly created react app test fails with a TypeError: (0 , _react2.waitFor) is not a function and the following error gets logged as well: Warning: An update to Fetch inside a test was not wrapped in act(...). This seems to be related to #641?

@testing-library/react version: 9.5.0
creater-react-app version: 3.4.1
react version: ^16.13.1
node version: v13.12.0
npm version: 6.14.4

Relevant code or config:

Same as src/__tests__/fetch.test.js

// __tests__/fetch.test.js
import React from 'react'
import { render, fireEvent, waitForElement, waitFor, screen } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import axiosMock from 'axios'
import Fetch from '../fetch'

jest.mock('axios')

test('loads and displays greeting', async () => {
  const url = '/greeting'
  render(<Fetch url={url} />)

  axiosMock.get.mockResolvedValueOnce({
    data: { greeting: 'hello there' },
  })

  fireEvent.click(screen.getByText('Load Greeting'))

  // Original in example https://testing-library.com/docs/react-testing-library/example-intro
  // Test fails and console error about updates not wrapped in act(). See ./error.txt
  await waitFor(() => screen.getByRole('heading'))

  // Other suggested example with expect() inside waitFor's callback
  // Test fails and console error about updates not wrapped in act()
  // await waitFor(() => {
  //   expect(screen.getByRole('heading')).toBeInTheDocument()
  // })

  // Test passes and no complaint about updates not wrapped in act()
  // But docs suggest it is deprecated
  // https://testing-library.com/docs/dom-testing-library/api-async#waitforelement-deprecated-use-find-queries-or-waitfor
  // await waitForElement(() => screen.getByRole('heading'))

  // Preferred suggested approach 
  // Test passes and no complaint about updates not wrapped in act()
  // await screen.findByRole('heading')

  expect(axiosMock.get).toHaveBeenCalledTimes(1)
  expect(axiosMock.get).toHaveBeenCalledWith(url)
  expect(screen.getByRole('heading')).toHaveTextContent('hello there')
  expect(screen.getByRole('button')).toHaveAttribute('disabled')
})

Error and Test failing output

Same as error.txt

 FAIL  src/__tests__/fetch.test.js
  ✕ loads and displays greeting (7ms)

  ● loads and displays greeting

    TypeError: (0 , _react2.waitFor) is not a function

      20 |   // Original in example https://testing-library.com/docs/react-testing-library/example-intro
      21 |   // Test fails and console error about updates not wrapped in act(). See ./error.txt
    > 22 |   await waitFor(() => screen.getByRole('heading'))
         |         ^
      23 | 
      24 |   // Other suggested example with expect() inside waitFor's callback
      25 |   // Test fails and console error about updates not wrapped in act()

      at Object.<anonymous> (src/__tests__/fetch.test.js:22:9)

  console.error node_modules/react-dom/cjs/react-dom.development.js:88
    Warning: An update to Fetch 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 */

    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
        in Fetch (at fetch.test.js:12)

  console.error node_modules/react-dom/cjs/react-dom.development.js:88
    Warning: An update to Fetch 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 */

    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
        in Fetch (at fetch.test.js:12)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.584s, estimated 1s
Ran all test suites.

Watch Usage: Press w to show more.

What you did:

Tried example suggested, read other ideas in the docs and implemented. Some with success and others without. See comments in fetch.test.js file above.

Reproduction:

To reproduce create a React App with npx create-react-app, copy the example fetch.js and fetch.test.js files from https://testing-library.com/docs/react-testing-library/example-intro. into the newly created app. Lastly run the tests.

Here is a repo made following the reproduction steps alejo4373/buggy-fetch-example-react-app

To me the error suggests that waitFor is no longer exported from this lib or that its documentation does not illustrate well enough its proper usage.

Source