開玩笑測試條件響應

Question

我有數據

const data = {
  animal: 'cat',
  isBlack: true
}

如果貓是黑色的，我希望我的組件渲染一些文本，如果貓不是黑色的，則不渲染。 我有幾個測試

describe('About', () => {
  const data = {
      animal: 'cat',
      isBlack: true
  }
  beforeEach(() => {
    fetchMock.getOnce('/api/animals', {data});
  });
  afterEach(() => {
    fetchMock.reset();
    expect(fetchMock.done()).toBe(true);
  });

  it('should render with first text', () => {
    expect(instance.getByText('Black Cats are awesome')).toBeVisible();
  })
  it('should render with second text', () => {
    expect(instance.getByText('Black Cats are my favourite')).toBeVisible();
  })
  it('should render with second text', () => {
    expect(instance.getByText('Black Cats rule')).toBeVisible();
  })
  it('should render no text', () => {
    expect(instance.queryByText('Black Cats rule')).toBeNull();
  })
)

所以基本上只要 isBlack 為假，就不應呈現任何文本。 所以，我現在所擁有的，我在每個測試中都有 fetchMock，我的願望是我在每個測試之前運行 fetchMock 並相應地更改測試中錯誤案例的響應。 有辦法嗎？

Answer 1

我看不到你的代碼，但假設它更像這樣：

• 組件CatComponent

import React from "react";
import { fetchData } from "./fetchCatData";

const CatComponent = () => {
  const [data, setData] = React.useState({});

  React.useEffect(() => {
    const fetchCatData = async () => {
      const data = await fetchData();
      setData(data);
    };

    fetchCatData();
  }, []);

  return (
    <div>
      {data && data.isBlack && (
        <>
          <p>Black Cats are awesome</p>
          <p>Black Cats are my favourite</p>
          <p>Black Cats rule</p>
          <p>Black Cats rule</p>
        </>
      )}
    </div>
  );
};

export default CatComponent;

• 提取 api： fetchCatData

export const fetchData = async () => {
  return Promise.resolve({ animal: 'dog', isBlack: false })
}

我們可以有這樣的測試：

import { render, screen, waitFor } from "@testing-library/react";
import CatComponent from "../CatComponent";

const mockFetchData = jest.fn();
jest.mock("../fetchCatData", () => ({
  fetchData: () => mockFetchData(),
}));

describe("should work tests", () => {
  it("no text", async () => {
    render(<CatComponent />);

    await waitFor(() => {
      expect(
        screen.queryByText("Black Cats are awesome")
      ).not.toBeInTheDocument();
    });
  });

  it('texts present', async () => {
    mockFetchData.mockResolvedValue({ isBlack: true })
    render(<CatComponent />);

    await waitFor(() => {
      expect(
        screen.getByText("Black Cats are awesome")
      ).toBeInTheDocument();
    });

    expect(screen.getByText('Black Cats are my favourite')).toBeInTheDocument();
  })
});