Javascript 用jest测试react组件

我正在遵循react（数据获取部分）的测试文档：

它使用fetch来获取数据。我在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);

我认为错误是因为jest不等待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;

从“React”导入React；
从“axios”导入axios；
类用户扩展了React.Component{
状态={
用户：空
};
componentDidMount（）{
这是fetchUserData（“1”）；
}
异步fetchUserData（id）{
const response=等待axios.get(
`https://jsonplaceholder.typicode.com/albums/${id}`
);
const user=wait response.data；
这是我的国家({
用户
});
}
render（）{
const{user}=this.state；
如果（！用户）{
返回装载。。。；
}
返回(
{user.userId}
{user.id}
{user.title}
);
}
}
导出默认用户；

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

从“React”导入React；
从“react dom”导入{render，unmountComponentAtNode}；
从“react dom/test utils”导入{act}；
从“/User”导入用户；
从“axios”导入axios；
让container=null；
开玩笑的模仿（“axios”）；
在每个之前（（）=>{
//将DOM元素设置为渲染目标
容器=document.createElement（“div”）；
文件.正文.附件（容器）；
});
之后（（）=>{
//退出时的清理
卸载组件节点（容器）；
容器。移除（）；
container=null；
});
它（“呈现用户数据”，异步（）=>{
常量伪造用户={
用户标识：“1”，
id:“1”，
标题：“quidem molestiae enim”
};
axios.get.mockResolvedValue（伪造用户）；
//使用异步版本的act应用已解决的承诺
等待动作（异步（）=>{
渲染（，容器）；
});
expect（container.querySelector（“.uid”）.textContent.toBe（fakeUser.userId）；
expect（container.querySelector（“.id”）.textContent.toBe（fakeUser.id）；
expect（container.querySelector（“.title”）.textContent.toBe（fakeUser.title）；
});

我解决了这个问题。解决方案是模拟

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

从“React”导入React；
从“react dom”导入{render，unmountComponentAtNode}；
从“react dom/test utils”导入{act}；
从“/User”导入用户；
从“axios”导入axios；
让container=null；
开玩笑的模仿（“axios”）；
在每个之前（（）=>{
//将DOM元素设置为渲染目标
容器=document.createElement（“div”）；
文件.正文.附件（容器）；
});
之后（（）=>{
//退出时的清理
卸载组件节点（容器）；
容器。移除（）；
container=null；
});
它（“呈现用户数据”，异步（）=>{
常量伪造用户={
用户标识：“1”，
id:“1”，
标题：“quidem molestiae enim”
};
axios.get.mockImplementation（（）=>
承诺，决心({
资料来源：伪造用户
})
);
//使用异步版本的act应用已解决的承诺
等待动作（异步（）=>{
渲染（，容器）；
});
expect（container.querySelector（“.uid”）.textContent.toBe（fakeUser.userId）；
expect（container.querySelector（“.id”）.textContent.toBe（fakeUser.id）；
expect（container.querySelector（“.title”）.textContent.toBe（fakeUser.title）；
});