lundi 28 septembre 2020

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

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: 'joni@gmail.com',
    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: 'joni22@gmail.com',
    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();
  });
});

Aucun commentaire:

Enregistrer un commentaire