React Testing Library - TypeError: actImplementation is not a function

user_7958022 0
Viewed 2169

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?

react-testing-library jestjs reactjs javascript
3 Answers

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.

user_187258760

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

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

user_79580220
Related