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

Question

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

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

    });

Answer 1

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

酶中的包装是不可变的。因此，您可以更新测试用例中的状态，然后在包装器中检查 li 标记长度。另外，对于您的用例，我建议在ComponentWillMount中进行异步调用。 你嘲笑API的方式和反应对我来说没有意义，使用了＆＃34; axios-mock-adapter＆＃34;已经存在于package.json中。 ：）

以下是工作示例：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);
    });
  });
});