为什么反应js中的实际长度和预期长度不相等答案

【问题标题】：why actual and expected length is not equal in react js为什么反应js中的实际长度和预期长度不相等
【发布时间】：2018-09-24 13:31:08
【问题描述】：

你能告诉我为什么反应 js 中的实际长度和预期长度不相等吗这是我的代码

https://codesandbox.io/s/oq7kwzrnj5

mockAxios.get.mockImplementation(() =>
      Promise.resolve({
        data: {
          data: ['a','b']
        }
      }));

我在数组上发送2 元素但得到0 元素

it("axios call check or not", async () => {
      const wrapper = shallow(<List />);
      expect(mockAxios.get).toHaveBeenCalledTimes(1);

      expect(wrapper.find("li").length).toBe(2);

    });

【问题讨论】：

您的编码沙箱未显示示例。
问题可能与组件生命周期有关。
显示codesandbox.io/s/oq7kwzrnj5
我的东西与生命周期无关

标签： reactjs unit-testing axios jestjs enzyme

【解决方案1】：

您正在 ComponentDidMount 中进行 async 调用。异步意味着'不要等待'，所以使用 wrapper.debug()，你可以看到它不包含 li 标签，因为项目的初始状态是 []，一旦调用完成，它会更新状态并重新渲染 DOM。

并且酶中的包装是不可变的。因此，您可以更新测试用例中的状态，然后检查包装器中的 li 标记长度。另外，我建议在 ComponentWillMount 中针对您的用例进行异步调用。您模拟 API 和响应的方式对我来说没有意义，使用了 package.json 中已经存在的“axios-mock-adapter”。 :)

这里是工作示例：https://codesandbox.io/s/30jp9vk67q

import React from "react";
import { shallow, mount } from "enzyme";
import List from "./ListItem";
import Enzyme from "enzyme";
import axios from "axios";
import MockAdapter from "axios-mock-adapter";

describe("List Components", () => {
  var mock = new MockAdapter(axios);
  beforeEach(() => {
    mock
     .onGet("https://biz.timesofindia.indiatimes.com/bankifsc/getlist")
      .reply(200, {
        data: [{ text_val: "a" }, { text_val: "b" }]
      });
  });

  describe("List Items", () => {
    it("check length", () => {
      const wrapper = shallow(<List />);
      console.log("Wrapper-Before-", wrapper.debug());
      wrapper.setState({ items: [{ text_val: "a" }, { text_val: "b"}]})
      console.log("Wrapper-After-", wrapper.debug());
      expect(wrapper.find("li").length).toBe(2);
    });
  });
});

【讨论】：