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?

I am facing similar issues, seems to be the problem with react-dom version 18 — Amerrnath
– Amerrnath, Commented Apr 2, 2022 at 9:54
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/… — JmLavoier
– JmLavoier, Commented May 10, 2022 at 22:15

Stephen Marx · Accepted Answer · 2022-04-06 14:00:45Z

7

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.

answered Apr 6, 2022 at 14:00

Stephen Marx

711 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

Smithy7876 Over a year ago

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 :)

Randal Andrade Nunes Over a year ago

Updating to React 18 also worked for me.

Ben Smith · Accepted Answer · 2022-04-01 19:42:33Z

0

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();
});

answered Apr 1, 2022 at 19:42

Ben Smith

20.3k6 gold badges74 silver badges98 bronze badges

Comments

Smithy7876 · Accepted Answer · 2022-04-08 10:32:52Z

0

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';

answered Apr 8, 2022 at 10:32

Smithy7876

3541 gold badge4 silver badges13 bronze badges

Comments

Mrinal Anand · Accepted Answer · 2024-04-30 08:38:11Z

0

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

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

edited Apr 30, 2024 at 8:38

answered Apr 30, 2024 at 8:22

Mrinal Anand

631 silver badge12 bronze badges

Collectives™ on Stack Overflow

React Testing Library - TypeError: actImplementation is not a function

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related