React Testing Library / Jest Update not wrapped in act(...)

Question

I've been getting this error message regarding act while testing.

Warning: An update to EmployeesDashboard 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 */


    in EmployeesDashboard (at EmployeesDashboard.test.tsx:69)"

I can't figure out why, since it seems I've already wrapped everything in act... What in here should I also be wrapping in act? Any help would be greatly appreciated since I'm fairly new to testing.

import React from 'react';
import { mocked } from 'ts-jest/utils';
import { act } from 'react-dom/test-utils';
import { EmployeesDashboard } from '../EmployeesDashboard';
import {
  render,
  wait,
  waitForElementToBeRemoved,
} from '@testing-library/react';

import { Employee } from '@neurocann-ui/types';
import { getAll } from '@neurocann-ui/api';

jest.mock('@neurocann-ui/api');


const fakeEmployees: Employee[] = [
  {
    email: '[email protected]',
    phone: '720-555-555',
    mailingAddress: {
      type: 'home',
      streetOne: '390 Blake St',
      streetTwo: 'Apt 11',
      city: 'Denver',
      state: 'CO',
      zip: '90203',
    },
    name: 'Joni Baez',
    permissions: ['Employee'],
    hireDate: new Date('2020-09-19T05:13:12.923Z'),
  },
  {
    email: '[email protected]',
    phone: '720-555-555',
    mailingAddress: {
      type: 'home',
      streetOne: '390 Blake St',
      streetTwo: 'Apt 11',
      city: 'Denver',
      state: 'CO',
      zip: '90203',
    },
    name: 'Joni Baez',
    permissions: ['Employee'],
    hireDate: new Date('2020-09-19T05:13:12.923Z'),
  },
];

mocked(getAll).mockImplementation(
  (): Promise<any> => {
    return Promise.resolve({ data: fakeEmployees });
  },
);
describe('EmployeesDashboard', () => {
  it('renders progress loader', () => {
    act(() => {
        render(<EmployeesDashboard />)
    });
    const employeesDashboard = document.getElementById(
      'simple-circular-progress',
    );
    expect(employeesDashboard).toBeInTheDocument();
    expect(employeesDashboard).toMatchSnapshot();
  });
  it('renders a table', async () => {
    await act(() => { render(<EmployeesDashboard />) });
    const table = document.getElementById('employees-table');
    expect(table).toBeInTheDocument();
  });
});

Answer 1

It usually means that you need to wait for something else to show up before expecting the EmployeesDashboard to be in the document. Wait for something else first, maybe the page's header or title. Try:

it('renders progress loader', async () => {
    
    const {findByText} = render(<EmployeesDashboard />)
    await findByText("something else");
    const employeesDashboard = document.getElementById(
      'simple-circular-progress',
    );
    expect(employeesDashboard).toBeInTheDocument();
    expect(employeesDashboard).toMatchSnapshot();
  });

Answer 2

Try adding a timer to your mock.

Instead of:

mocked(getAll).mockImplementation(
  (): Promise<any> => {
    return Promise.resolve({ data: fakeEmployees });
  },
);

Try:

mocked(getAll).mockImplementation(() => {
  return new Promise(resolve => {
    setTimeout(() => resolve(123), 0);
  });
});