如何查找多个项目来测试随机生成的API？

Question

我正在尝试测试来自API的页面上的渲染数据。 API生成了三个随机对象之一，在这种情况下，它们是天气，并且包含以下类型：

  forcast: string;
  max: number;
  min: number;
  description: string;

我是对测试和打字稿的新手，并且想知道我如何在页面上找到预测，如果每个预测都会随机化每个称呼。

这是到目前为止我的代码： Weather.tsx

import axios from 'axios';
import { useEffect, useState } from 'react';
import { IWeather } from '../interfaces/IWeather';

const Weather = () => {
  const [minTemp, setMinTemp] = useState<IWeather[]>([]);
  const [maxTemp, setMaxTemp] = useState<IWeather[]>([]);
  const [forcast, setForcast] = useState([]);

  const fetchWeatherData = async () => {
    const response = await axios.get('http://mock-api-call/weather/get-weather');
    setMinTemp(response.data.result.weather.min);
    setMaxTemp(response.data.result.weather.max);
    setForcast(response.data.result.weather.forcast);
  };

  useEffect(() => {
    fetchWeatherData();
  }, []);

  return (
    <div className="container">
      <p className="forcast">{forcast}</p>
      <p className="temperature">Temperature {`${minTemp} to ${maxTemp}`}</p>
    </div>
  );
};

export default Weather;

，这是所有预测元素测试的基本版本。我尝试添加||并搜索多个字符串，但不幸的是不起作用 weather.test.tsx

import { render, screen } from '@testing-library/react';
import Weather from '../Weather';

import { rest } from 'msw';
import { setupServer } from 'msw/node';

const server = setupServer(
  rest.get('http://mock-api-call/weather/get-weather', (req, res, ctx) => {
    return res(ctx.json({}));
  }),
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

describe('Weather', () => {
  test('should render forcast for day', async () => {
    render(<Weather />);
    const forecast = await screen.findAllByText(/sunny/i || /overcast/i || /snowing/i);
    expect(forecast).toBeInTheDocument();
  });
});

我还收到此typeError，

TypeError: Cannot read properties of undefined (reading 'weather')

      10 |   const fetchWeatherData = async () => {
      11 |     const response = await axios.get('http://mock-api-call/weather/get-weather');
    > 12 |     setMinTemp(response.data.result.weather.min);
         |                                     ^
      13 |     setMaxTemp(response.data.result.weather.max);
      14 |     setForcast(response.data.result.weather.forcast);
      15 |   };

以清楚一下数据，数据渲染到了页面上。