Jest測試中的條件渲染處理

在Jest測試中，處理條件渲染通常需要使用jest.spyOn()方法來模擬組件的行為

1. 首先，確保已經安裝了@testing-library/react和@testing-library/jest-dom庫。如果沒有，請運行以下命令進行安裝：

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

2. 假設你有一個名為MyComponent的組件，它根據isVisible屬性來決定是否顯示內容：

// MyComponent.js
import React from 'react';

const MyComponent = ({ isVisible }) => {
  if (!isVisible) {
    return null;
  }

  return <div>Hello, World!</div>;
};

export default MyComponent;

3. 現在，創建一個名為MyComponent.test.js的測試文件，并編寫以下測試用例：

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

describe('MyComponent', () => {
  it('renders content when isVisible is true', () => {
    render(<MyComponent isVisible={true} />);
    expect(screen.getByText('Hello, World!')).toBeInTheDocument();
  });

  it('does not render content when isVisible is false', () => {
    render(<MyComponent isVisible={false} />);
    expect(screen.queryByText('Hello, World!')).not.toBeInTheDocument();
  });
});

在這個例子中，我們使用render函數來渲染MyComponent組件，并傳遞不同的isVisible屬性值。然后，我們使用screen.getByText()和screen.queryByText()方法來檢查組件是否按預期渲染。

注意：在第二個測試用例中，我們使用screen.queryByText()而不是screen.getByText()，因為當isVisible為false時，組件不應該渲染任何內容。screen.queryByText()會返回null（如果找不到元素），這樣我們就可以使用not.toBeInTheDocument()斷言來檢查組件是否未渲染。