Please write a test using react.js for this component: import { useDispatch, useSelector } from "react-redux" import { ToastContainer, toast } from 'react-toastify' import 'react-toastify/dist/ReactToastify.css' import { getProduct } from "../../store/products" export const BuyProduct = () => { const dispatch = useDispatch() const { money, chosenProduct, products } = useSelector(state => state.products) const handleBuyProduct = () => { const index = products.findIndex(product => Number(product.sku) === Number(chosenProduct)) if (index === -1) { toast.error(`There is no product with the SKU: ${chosenProduct}`, { position: "top-center", autoClose: 5000, hideProgressBar: false, closeOnClick: true, pauseOnHover: true, draggable: true, progress: undefined, theme: "colored", }) } else { let insertedMoney = money !== 0 ? money : 0 let product = products[index] let price = product['price'] insertedMoney = parseFloat(insertedMoney) price = parseFloat(price) if (insertedMoney >= price) { dispatch(getProduct(chosenProduct, price, insertedMoney)) } else { toast.error(`The money you inserted is not enough to buy the product with the SKU: ${chosenProduct}`, { position: "top-center", autoClose: 5000, hideProgressBar: false, closeOnClick: true, pauseOnHover: true, draggable: true, progress: undefined, theme: "colored", }) } } } return ( <div> <div className="d-grid gap-2 mt-3"> <button type="button" className="btn btn-success btn-lg" disabled={(money !== 0 && chosenProduct !== undefined && chosenProduct.length === 4) ? false : true} onClick={handleBuyProduct} > Buy Product </button> </div> {/* Component to display alerts */} <ToastContainer /> </div> ) }

import React from 'react'
import { render, screen } from '@testing-library/react'
import { BuyProduct } from './BuyProduct'

describe('Buy product Component', () => {
    it('should render the buy button', () => {
        const { getByText } = render(<BuyProduct />)
        const button = getByText(/Buy Product/)
        expect(button).toBeInTheDocument()
    });

    it('should render the buy button disabled', () => {
        const { getByText } = render(<BuyProduct />)
        const button = getByText(/Buy Product/)
        expect(button).toBeDisabled()
    });

    it('should render the buy button enabled', () => {
        const { getByText } = render(<BuyProduct />)
        const button = getByText(/Buy Product/)
        expect(button).toBeEnabled()
    });

    it('should render toast container', () => {
        const { getByTestId } = render(<BuyProduct />)
        const toast