Jest測試React組件的Props類型檢查

要使用Jest測試React組件的Props類型檢查，你需要遵循以下步驟：

1. 首先，確保你已經安裝了所需的依賴項。在項目根目錄中運行以下命令：

npm install --save-dev jest @testing-library/react @types/jest @types/testing-library__react

2. 在項目根目錄中創建一個名為setupTests.js的文件，并添加以下內容：

import '@testing-library/jest-dom';

3. 在package.json文件中，將test腳本更改為jest：

"scripts": {
  "test": "jest",
  // ...其他腳本
}

4. 創建一個React組件，例如MyComponent.tsx，并定義Props類型：

import React from 'react';

interface MyComponentProps {
  name: string;
  age: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
  return (
    <div>
      <h1>Name: {name}</h1>
      <p>Age: {age}</p>
    </div>
  );
};

export default MyComponent;

5. 為MyComponent編寫一個測試文件，例如MyComponent.test.tsx：

import React from 'react';
import { render } from '@testing-library/react';
import MyComponent, { MyComponentProps } from './MyComponent';

describe('MyComponent', () => {
  const defaultProps: MyComponentProps = {
    name: 'John Doe',
    age: 30,
  };

  it('renders the name and age correctly', () => {
    const { getByText } = render(<MyComponent {...defaultProps} />);

    expect(getByText('Name: John Doe')).toBeInTheDocument();
    expect(getByText('Age: 30')).toBeInTheDocument();
  });

  // 添加更多測試用例以確保Props類型檢查正常工作
});

6. 運行測試：

npm test

這樣，你就可以使用Jest和@testing-library/react來測試React組件的Props類型檢查了。在編寫測試用例時，確保覆蓋所有可能的輸入和邊界條件，以確保組件的正確性和穩定性。