How to findBy multiple items to test a random generated API? - reactjs

Question

I am trying to test rendered data on my page that is coming from an api. The api generates one of three random objects, in this case they are weather and contain the following types:
forcast: string;
max: number;
min: number;
description: string;
I'm new to testing and typescript and am wondering how I can find say the forecast on a page if it is going to be randomised each call.
here is my code thus far:
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;
And this is a basic version of say testing for all the forecast elements. I have tried adding || and searching for multiple strings but unfortunately is not working
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();
});
});
I am also receiving this 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 | };
For clarity the data is rendering onto the page.