React 测试库 - TypeError：actImplementation 不是函数

Question

尝试对此组件进行简单测试时，出现 TypeError: actImplementation is not a function

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

这是我的测试

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

它指向

render(<Header /)

作为问题

大家有什么想法吗？

Answer 1

我在使用

react@17

、

react-dom@18

和

@testing-library-react@13

时遇到了同样的错误。将

react

升级为

18

解决了问题。

Answer 2

您没有正确导入标头，请将导入更改为：

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

（或导出标头组件的任何文件）

此外，您的第一个测试不是渲染组件，因此测试失败。

更改为：

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

Answer 3

就我而言，这是由于 npm、node 和 React 的版本不匹配造成的。

更新

[email protected]

、

[email protected]

和

[email protected]

解决了我的问题

Answer 4

好吧，经过多次尝试和错误，结果证明这是一个简单的修复。我在测试中应用了此导入，但没有应用该组件

import * as React from 'react';