React单元测试运行npm test报错TypeError: 无法读取undefined的Component属性

你遇到的报错由两处代码错误导致：

• HelloWorld.js中类组件的基类Component未正确引入。你仅全局导入了React对象，既没有单独解构导入Component，也没有通过React.Component的写法调用基类，运行时Component为undefined，继承操作读取undefined的属性就会抛出TypeError: Cannot read properties of undefined (reading 'Component')错误。
• test.js中组件导入方式错误。HelloWorld使用的是默认导出语法export default HelloWorld，导入时不能加花括号做解构导入，错误的导入写法会让你拿到的HelloWorld值为undefined，后续渲染时也会触发异常。

修正后的HelloWorld.js #

import React, { Component } from "react";

class HelloWorld extends Component {
  render() {
    return <h1>My First ReactJS Core App!</h1>;
  }
}
export default HelloWorld

补充：如果不想单独导入Component，也可以把继承语句改为class HelloWorld extends React.Component，效果完全一致。另外JSX的尖括号和标签名之间不要加多余空格，虽然多数转译工具可以兼容，但不符合React代码书写规范。

修正后的test.js #

import React from "react";
// 默认导出的组件直接导入，不需要加花括号
import HelloWorld from "../wwwroot/src/react/HelloWorld"
import { render, screen } from "@testing-library/react";

describe("apptest", () => {
  it("works", () => {
    render(<HelloWorld />);
    // 增加断言，确保用例找不到元素时能正常抛出失败提示
    expect(screen.getByText("My First ReactJS Core App!")).toBeInTheDocument();
  });
});

内容的提问来源于stack exchange，提问作者doritoslover