Testing React components

  Content description:

 In this post I'll describe how to test React component

My Warehouses component takes a list of warehouses as an argument. When there are no warehouses yet, a component with a spinner and the text "Loading..." is displayed.

     
import { useNavigate} from "react-router-dom"
import { DataGrid } from '@mui/x-data-grid';
import {Paper, Typography} from '@mui/material';
import LoadingSpinner from "./LoadingSpinner";

function Warehouses({warehouses}) {
  const navigate = useNavigate()
  
  const paginationModel = { page: 0, pageSize: 5 };

  const columns = [
    { field: 'index', headerName: '#', width: 50, headerClassName: 'header-style' },
    { field: 'warehouseName', headerName: 'Warehouse', width: 150, headerClassName: 'header-style' },
    { field: 'warehouseInfo', headerName: 'Info', width: 250, headerClassName: 'header-style' },
  ];
  
  let rows
  if (!warehouses) {
    return(
      <LoadingSpinner/>
    )
  } else if (warehouses?.detail) {
    return(
      <typography color="error" variant="h6">{warehouses.detail}</typography>)
  } else {
      rows = warehouses.map((item, index) => ({
      id: item.id,
      index: ++index,
      warehouseName: item.warehouse_name,
      warehouseInfo: item.warehouse_info }))
  }
  

  return (
    <>
      
      <Paper sx={{ height: '100%', width: '100%', headerClassName: 'header-style'}}>
        {warehouses &&
        <DataGrid
          rows={rows}
          columns={columns}
          initialState={{ pagination: { paginationModel } }}
          pageSizeOptions={[5, 10]}
          sx={{ border: 0, 
              '& .header-style': {
          backgroundColor: '#a5d6a7',
              }
           }}
          onRowClick={(params) => (navigate(`/warehouses/${params.row.id}`))}
        /> }
      </Paper>
    </>
  )
} 

Loaded warehouse data in the above screenshot, or a spinner when data is not yet available.

I test the warehouse component by checking cases when warehouse data is not yet available and after downloading the data.

     
import { expect} from 'vitest';
import Warehouses from '../../src/components/Warehouses';
import {render, screen} from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';


const props = {
    warehouses:[
    {
        id: 0,
        warehouse_name: "warehouse1",
        warehouse_info: "warehouse1 info"
    }]
}

describe('Warehouses', () => {
    
    it('Should render Loading component when no props',  () => {
        render(<MemoryRouter><Warehouses/></MemoryRouter>)
        const text = screen.getByText('Loading...')
        expect(text).toBeInTheDocument()
    })
    it('Should render Warehouse component when props provided',  () => {
        render(<MemoryRouter><Warehouses warehouses={props.warehouses}/></MemoryRouter>)
        const warehouseName = screen.getByText('warehouse1')
        expect(warehouseName).toBeInTheDocument()
        const warehouseInfo = screen.getByText('warehouse1 info')
        expect(warehouseInfo).toBeInTheDocument()
    })
})