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 was getting the same error when using react@17, react-dom@18 and @testing-library-react@13. Upgrading react to 18 solved the problem.
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();
});
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';