reactjs - Hur man kontrollerar om alert har kallats i Jest-testning av React med Typescript?

Jag har ett HTML-val med några alternativ som när jag trycker på en knapp skickas till en server. Beroende på svaret visas en alert. Metoden ser ut så här:

 const sendOrder = async (json : string) => {
        const request = await fetchUrl("<irrelevant url>", "POST", json);
        if(request.status === 200){
            const order = await request.json();
            alert(`Created Order #${order.data.id}`)
        }else{
            alert("Order failed")      
        }
    } 

Nu har jag mockat servern med msw och mitt test ser ut ungefär så här:

it('should create an order', async () => {

        render(<ArticleList />);
        render(<ShoppingCart afterSubmit={()=> {}}/>)

        const articlesList = getNullSafeElement('articles');
        await waitFor(() => {
            expect(articlesList.children.length).toBe(2);
        })
        const orderButton = getNullSafeElement('submitBtn');
        const shoppingCart =  document.querySelector('#cart') as HTMLSelectElement; 
        const addressInput = document.querySelector('#address') as HTMLInputElement;

        addressInput.value = "testAddress"
        expect(shoppingCart.options.length).toBe(0);
        fireEvent.click(articlesList.children[0]);
        expect(shoppingCart.children.length).toBe(1);
        fireEvent.click(orderButton);
        
      });

Jag vet med säkerhet att detta test körs som förväntat och att förfrågan definitivt skickas till den mockade servern via fireEvent.click(orderButton). Men om jag nu vill göra något som detta expect(global.alert).toHaveBeenCalledTimes(1), fungerar det inte. Nu vet jag att jag måste mocka anropet och jag såg några inlägg på SO om detta problem

Mocka eller påstå om window.alert har körts

Testavisering i React Native

Men varken global.alert=jest.fn() eller jest.spyOn(global, 'alert') har fungerat. Båda resulterar i 0 anrop.

Så min fråga är: Hur kan jag testa om alert() har blivit kallad i mitt test?

(Jag skapar ett frontend med create-react-app med TypeScript-mallen och testar med Jest)

Svar #1

Kanske är sen, men jag stötte på samma problem.

Jag löste det genom att använda await framför fireEvent klick. I ditt fall,

it('should create an order', async () => {
    global.alert = jest.fn();

    render(<ArticleList />);
    render(<ShoppingCart afterSubmit={()=> {}}/>)

    const articlesList = getNullSafeElement('articles');
    await waitFor(() => {
        expect(articlesList.children.length).toBe(2);
    })
    const orderButton = getNullSafeElement('submitBtn');
    const shoppingCart =  document.querySelector('#cart') as HTMLSelectElement; 
    const addressInput = document.querySelector('#address') as HTMLInputElement;

    addressInput.value = "testAddress"
    expect(shoppingCart.options.length).toBe(0);
    fireEvent.click(articlesList.children[0]);
    expect(shoppingCart.children.length).toBe(1);
    await fireEvent.click(orderButton);
    expect(global.alert).toHaveBeenCalledTimes(1);
  });