Jest测试React组件的Props

要使用Jest测试React组件的props，你需要首先设置一个测试环境，安装必要的依赖，然后编写测试用例

1. 安装依赖：

确保你已经安装了Node.js和npm。然后，在项目根目录下运行以下命令来安装Jest和React Testing Library：

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

2. 配置Jest：

在项目根目录下创建一个名为jest.config.js的文件，并添加以下内容：

module.exports = {
  preset: "react"
};

3. 创建一个React组件：

在src目录下创建一个名为MyComponent.js的文件，并添加以下内容：

import React from "react";

const MyComponent = ({ title, subtitle }) => {
  return (
    <div>
      <h1>{title}</h1>
      <h2>{subtitle}</h2>
    </div>
  );
};

export default MyComponent;

4. 编写测试用例：

在src目录下创建一个名为MyComponent.test.js的文件，并添加以下内容：

import { render } from "@testing-library/react";
import MyComponent from "./MyComponent";

describe("MyComponent", () => {
  it("renders the correct title and subtitle", () => {
    const title = "Hello, World!";
    const subtitle = "This is a test.";

    const { getByText } = render(<MyComponent title={title} subtitle={subtitle} />);

    expect(getByText(title)).toBeInTheDocument();
    expect(getByText(subtitle)).toBeInTheDocument();
  });
});

5. 运行测试：

在package.json文件中的scripts部分添加一个名为test的脚本：

"scripts": {
  "test": "jest"
},

然后在命令行中运行npm test。你应该会看到测试通过的结果。

这就是如何使用Jest测试React组件的props。你可以根据需要编写更多的测试用例来确保组件按预期工作。