How to test React component with nested components/elements with async calls?

Generally, you'd use something like React Testing Library which allows you to mount a component inside of jest and then make assertions on it via utilities that inspect the DOM output of that component.

As you mention, you also need to deal with that your component makes network calls. To mock the network call you could use Jests spyOn functionality on window.fetch where you would provide a fake response such that when fetch is called, it returns your fake response rather than actually making the call.

However, this can be cumbersome. I'd usually make use of something like MSW which has a nice interface for faking network calls.

Your example is fairly complicated to assert on as you are rendering charts. Actually, as a first test to write for React, this is at a more advanced level. You could decide to assert on every bar element in the graph but usually, you'd say this is overkill as the chart library you are using is probably also well-tested (unless you've implemented these yourself?), you don't need to test it extensively in your own app.

Additionally, typically charts won't render right inside of Jest anyway as it's a fake DOM environment that doesn't actually fully emulate a browser in terms of layout.

So it might be fine to just say "it gets the right data for the right option and renders the charts with the right data when it arrives". Since you probably don't want to assert on the actual SVG chart elements (and probably can't because of what I said about Jest not being a real browser), you could mock the chart components to basically just output the passed-in data to the DOM, to allow you to assert on it. This is a fairly advanced use case. You'd usually avoid mocking actual components and instead assert on the real dom outputted by the real components in most cases.

I don't know what chart lib you are using so my answer is limited because I can't write the necessary mocks. Let me know though if I can help further.

Additionally, I don't know what select lib you are using so I can't write the bits about selecting the options.

import { rest } from 'msw'
import { setupServer } from 'msw/node'
import { fireEvent, render, screen } from '@testing-library/react'
import Dashboard from './Dashboard' // Change to your file/import

const server = setupServer(
  rest.get('http://localhost:3000/getData', (req, res, ctx) => {
    return res(
        ctx.json([ // I made this up cos I'm not a weather expert but you'd give realistic data
            { temperature: 25, dewPoint: 2, visibility: 10 },
            { temperature: 12, dewPoint: 4, visibility: 9 },
            { temperature: 27, dewPoint: 5, visibility: 4 }
        ])
     )
  }),
)


describe('<Dashboard />', () => {

    beforeAll(() => { 
       // TODO: Mock the chart components with a fake react component that passes through `data` but `JSON.stringify`'ed in the HTML output so you can assert on it.
       server.listen() 
    })
    afterEach(() => server.resetHandlers())
    afterAll(() => server.close())

 
   it('renders temperature charts when temperature option is selected', async () => {
      const { findByTestId } = render(<Dashboard />)
      
      // TODO: Get the option for temperature and use `fireEvent.click` to click it.

      const barChart = await findByTestId('BarChart')
      expect(barChart.innerHTML).toBe(JSON.stringify([25, 12, 27]))

      const radarChart = await findByTestId('RadarChart')
      expect(radarChart.innerHTML).toBe(JSON.stringify([25, 12, 27]))

      const lineChart = await findByTestId('LineChart  ')
      expect(lineChart.innerHTML).toBe(JSON.stringify([25, 12, 27]))

   })

})

You'd repeat this for the other options.