Reactjs 为什么实际长度和预期长度不相等

你能告诉我为什么实际长度和预期长度不相等吗 这是我的密码

我正在数组中发送

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

    });

it（“axios是否调用检查”，async（）=>{
常量包装器=浅（）；
期望（mockAxios.get）.tohavebeincalledtimes（1）；
expect（wrapper.find（“li”）.length）.toBe（2）；
});

---

您正在调用ComponentDidMount。Async表示“不等待”，因此使用wrapper.debug（），可以看到它不包含li标记，因为项的初始状态为[]，一旦调用完成，它将更新状态并重新呈现DOM

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

以下是工作示例：

从“React”导入React；
从“酶”中导入{shall，mount}；
从“/ListItem”导入列表；
从“酶”进口酶；
从“axios”导入axios；
从“axios模拟适配器”导入模拟适配器；
描述（“列出组件”，（）=>{
var mock=新的MockAdapter（axios）；
在每个之前（（）=>{
嘲弄
.onGet（”https://biz.timesofindia.indiatimes.com/bankifsc/getlist")
.答复（200{
数据：[{text_val:“a”}，{text_val:“b”}]
});
});
描述（“列出项目”，（）=>{
它（“检查长度”，（）=>{
常量包装器=浅（）；
log（“Wrapper Before-”，Wrapper.debug（））；
setState（{items:[{text\u val:“a”}，{text\u val:“b”}]}）
log（“Wrapper After-”，Wrapper.debug（））；
expect（wrapper.find（“li”）.length）.toBe（2）；
});
});
});

您的编码沙盒没有显示示例。问题可能与组件生命周期有关。显示与生命周期无关的内容

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

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

    });

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