Question

我正在关注关于测试（数据获取部分）的测试文档：https://reactjs.org/docs/testing-recipes.html#data-fetching

它使用获取来获取数据。我在axios上尝试了相同的操作，但出现以下错误：

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

我认为该错误是因为开玩笑不等待axios获取数据然后重新渲染组件。我想不通等待元素。

这是User.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;

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

Answer 1

我解决了这个问题。解决方案是模拟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);
});

开玩笑地测试组件

1 个答案: