Тестирование реакции компонента с шуткой - PullRequest
Новая
       5

Тестирование реакции компонента с шуткой

0 голосов
/ 04 февраля 2020

Я слежу за тестовой документацией по реагированию, часть извлечения данных: https://reactjs.org/docs/testing-recipes.html#data -подбор

Он использует выборку для получения данных. Я попробовал то же самое с ax ios, но получаю следующую ошибку: 

TypeError: Cannot read property 'textContent' of null
    > 43 |   expect(container.querySelector(".uid").textContent).toBe(fakeUser.userId);
         |          ^
      44 |   expect(container.querySelector(".id").textContent).toBe(fakeUser.id);
      45 |   expect(container.querySelector(".title").textContent).toBe(fakeUser.title);

Я думаю, что ошибка в том, что Jest не ждет, пока ax ios получит данные, а затем повторно отрендерит компонент. Я не мог сообразить, что ждать элемента.

Это пользователь. js

import React from "react";
import axios from "axios";

class User extends React.Component {
  state = {
    user: null
  };

  componentDidMount() {
    this.fetchUserData("1");
  }

  async fetchUserData(id) {
    const response = await axios.get(
      `https://jsonplaceholder.typicode.com/albums/${id}`
    );
    const user = await response.data;

    this.setState({
      user
    });
  }

  render() {
    const { user } = this.state;
    if (!user) {
      return <div>loading...</div>;
    }
    return (
      <div>
        <div className="uid">{user.userId}</div>
        <div className="id">{user.id}</div>
        <div className="title">{user.title}</div>
      </div>
    );
  }
}

export default User;

Это пользователь.test. js

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";
import User from "./User";
import axios from "axios";

let container = null;
jest.mock("axios");

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;
});

it("renders user data", async () => {
  const fakeUser = {
    userId: "1",
    id: "1",
    title: "quidem molestiae enim"
  };

  axios.get.mockResolvedValue(fakeUser);
  // Use the asynchronous version of act to apply resolved promises
  await act(async () => {
    render(<User id="1" />, container);
  });

  expect(container.querySelector(".uid").textContent).toBe(fakeUser.userId);
  expect(container.querySelector(".id").textContent).toBe(fakeUser.id);
  expect(container.querySelector(".title").textContent).toBe(fakeUser.title);
});

1 Ответ

0 голосов
/ 04 февраля 2020

Ну, я решил проблему. Решение состояло в том, чтобы высмеивать axios и вводить ответ с помощью mockImplementation

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";
import User from "./User";
import axios from "axios";

let container = null;
jest.mock("axios");
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;
});

it("renders user data", async () => {
  const fakeUser = {
    userId: "1",
    id: "1",
    title: "quidem molestiae enim"
  };

  axios.get.mockImplementation(() =>
    Promise.resolve({
      data: fakeUser
    })
  );
  // Use the asynchronous version of act to apply resolved promises
  await act(async () => {
    render(<User id="1" />, container);
  });

  expect(container.querySelector(".uid").textContent).toBe(fakeUser.userId);
  expect(container.querySelector(".id").textContent).toBe(fakeUser.id);
  expect(container.querySelector(".title").textContent).toBe(fakeUser.title);
});
...