React Testing Library - TypeError: actImplementation is not a function

Question

I'm getting TypeError: actImplementation is not a function when trying a simple test for this component

import React from 'react';
import { StyledHeaderContainer, StyledTitle } from './styled';

export const Header = () => {
  return (
    <StyledHeaderContainer>
      <StyledTitle data-testid='title-test-id'>Subject Access Request</StyledTitle>
    </StyledHeaderContainer>
  );
};

This is my test

import * as React from 'react';
import 'jest-styled-components';

import { render, screen } from '@testing-library/react';
import { Header } from '../';
import "@testing-library/jest-dom";

describe('Header', () => {
  it('is rendered correctly', () => {
    expect(<Header />).toMatchSnapshot();
  });
});

describe('Title', () => {
    it('should have correct text', () => {
        render(<Header />);
        expect(screen.getByTestId('title-test-id')).toHaveTextContent('Subject Access Request');
    })
})

It is pointing to the render(<Header /) as the problem

Anyone have any ideas?

Definition

I am facing similar issues, seems to be the problem with react-dom version 18 – Impromptu

Can you post your package.json please – Domitiladomonic

I had the same problem, and the problem was a wrong moduleNameMapper config in my jest.config. This issue has helped me github.com/testing-library/react-testing-library/issues/… – Lobscouse

Answer 1

Ok so after much trial and error it turned out to be a simple fix. I had applied this import in my test but not the component import * as React from 'react';

Definition

Answer 2

I was getting the same error when using react@17, react-dom@18 and @testing-library-react@13. Upgrading react to 18 solved the problem.

Yeti

Unfortunately due to company policy I need to use the typescript version which isn't at 18 yet by the looks of things. Still this is helpful and I found another work around :) – Definition

Updating to React 18 also worked for me. – Illlooking

Answer 3

You are not importing Header correctly change the import to:

import { Header } from '../Header';

(or whatever file is exporting the Header component)

Also your first test is not rendering a component so the test is failing.

Change it to:

it('is rendered correctly', () => {
 render(<Header />);
 expect(<Header />).toMatchSnapshot();
});

Hydrops

Answer 4

In my case it was due to uncompatible versions of npm, node and react.

Updating [email protected], [email protected] & [email protected] solved my issue

Mcanally