Jest測(cè)試中的條件渲染處理

在Jest測(cè)試中，處理?xiàng)l件渲染通常需要使用jest.spyOn()方法來模擬組件的行為

1. 首先，確保已經(jīng)安裝了@testing-library/react和@testing-library/jest-dom庫。如果沒有，請(qǐng)運(yùn)行以下命令進(jìn)行安裝：

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

2. 假設(shè)你有一個(gè)名為MyComponent的組件，它根據(jù)isVisible屬性來決定是否顯示內(nèi)容：

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

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

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

export default MyComponent;

3. 現(xiàn)在，創(chuàng)建一個(gè)名為MyComponent.test.js的測(cè)試文件，并編寫以下測(cè)試用例：

// 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();
  });
});

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

注意：在第二個(gè)測(cè)試用例中，我們使用screen.queryByText()而不是screen.getByText()，因?yàn)楫?dāng)isVisible為false時(shí)，組件不應(yīng)該渲染任何內(nèi)容。screen.queryByText()會(huì)返回null（如果找不到元素），這樣我們就可以使用not.toBeInTheDocument()斷言來檢查組件是否未渲染。