Как написать модульный тест компонента React с помощью ловушки useEffect и асинхронного вызова c? - PullRequest
Новая
       9

Как написать модульный тест компонента React с помощью ловушки useEffect и асинхронного вызова c?

0 голосов
/ 08 апреля 2020

Я начинаю с базового c приложения create-Reaction-app и пытаюсь изучить правильные методы юнит-тестирования. Я обновил исходный компонент приложения, чтобы вызывать API локального узла для базового c строкового ответа. Я не могу найти в документации о том, как проверить, что тег параграфа get является поддельным ответом в моем тесте.

То, что происходит, это то, что компонент просто застрял с начальным «Hello World!» текст из сообщения о состоянии и не обновляется с поддельным ответным сообщением. Я уверен, что должен запустить обновление или завершить sh цикл дайджестов, но пока не уверен, как это сделать.

Приложение. js

import React from "react";
import axios from "axios";
import "./App.css";

const App = () => {
  const [message, setMessage] = React.useState("Hello World!");

  React.useEffect(() => {
    const getGreetingFromApi = async () => {
      const apiResponseGreeting = await axios.get("api/hello");
      setMessage(apiResponseGreeting.data);
    };
    getGreetingFromApi();
  });

  return (
    <div className="App">
      <header className="App-header">
        <p>{message}</p>
      </header>
    </div>
  );
};

export default App;

App.test. js

import React from "react";
import ReactDOM from "react-dom";
import { act } from "react-dom/test-utils";

import axios from "axios";
import App from "./App";

jest.mock("axios");

describe("App Component Tests", () => {

    let container;

    beforeEach(() => {
        container = document.createElement("div");
        document.body.appendChild(container);
    });

    afterEach(() => {
        document.body.removeChild(container);
        container = null;
    });

    it("App replaces initial value with greeting response", async () => {
        const mockResponse = { data: "Label Test Text" };
        axios.get.mockResolvedValue(mockResponse);

        let paragraph;

        act(() => {
            ReactDOM.render(<App />, container);
            paragraph = container.querySelector("p");
        });

        expect(paragraph.textContent).toEqual(mockResponse.data);
    });
});

1 Ответ

0 голосов
/ 09 апреля 2020

Спасибо @diedu за комментарии. Это указало мне в правильном направлении. Это последний рабочий тест: 

it("App replaces initial value with greeting response", async () => {
    const mockResponse = { data: "Label Test Text" };
    axios.get.mockResolvedValue(mockResponse);

    let paragraph;

    await act(async () => {
      await ReactDOM.render(<App />, container);
      paragraph = container.querySelector("p");
    });

    expect(paragraph.textContent).toEqual(mockResponse.data);
});
...