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。你可以根據需要編寫更多的測試用例來確保組件按預期工作。