CODEWITHSUNDEEP
javascriptreactjsjestjsreact-testing-library
Smithy7876
Smithy7876

Reputation: 344

React Testing Library - TypeError: actImplementation is not a function

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?

Upvotes: 8

Views: 10422

Answers (4)

Mrinal Anand
Mrinal Anand

Reputation: 65

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

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

Upvotes: 0

Smithy7876
Smithy7876

Reputation: 344

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

Upvotes: -1

Stephen Marx
Stephen Marx

Reputation: 71

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.

Upvotes: 7

Ben Smith
Ben Smith

Reputation: 20230

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

Upvotes: 0

Related Questions