import React from "react"; import { render, fireEvent, act, waitForElement } from "@testing-library/react"; import CrystalBall from "./CrystalBall"; import { unmountComponentAtNode } from "react-dom"; import axios from "axios"; jest.mock("axios"); let container: any = null; beforeEach(() => { // setup a DOM element as a render target container = document.createElement("div"); document.body.appendChild(container); }); afterEach(() => { // cleanup on exiting unmountComponentAtNode(container); container.remove(); container = null; }); test("renders CrystalBall", () => { let linkElement: any = null; act(() => { const { getByText } = render(<CrystalBall />); linkElement = getByText(/What is your future/i); }); expect(linkElement).toBeInTheDocument(); }); test("renders message from backend", async () => { // Setup axios.get.mockResolvedValue({ data: "message!" }); act(() => { const { getByText } = render(<CrystalBall />); fireEvent.click(getByText(/Get My Fortune Told/i)); }); // Get results const msgElement: any = await waitForElement(() => document.getElementById("msg") ); const text: string = msgElement.innerHTML.valueOf(); // Assert expect(msgElement).toBeInTheDocument(); expect(text).toContain("message!"); });