为什么在 React JS 中实际长度和预期长度不相等

Question

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

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 中进行 async 调用。异步意味着 'do not wait'，因此使用 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);
    });
  });
});

为什么在 React JS 中实际长度和预期长度不相等

why actual and expected length is not equal in react js

unit-testing

reactjs

jestjs

enzyme

axios