React单元测试报Cannot read property 'down' of undefined问题求助

你遇到的错误和测试代码的问题共有三处，对应修复逻辑如下：

• 第一：API混用错误
  getByTestId是React Testing Library专属的查询方法，你当前用Enzyme的mount方法渲染组件，Enzyme实例不存在该方法，会导致查询逻辑报错。
• 第二：缺少axios mock返回值定义
  你仅声明了mock axios模块，没有给axios对应的请求方法设置返回值。如果你的SegmentationLanding组件初始化时会调用axios接口，接口返回为空时，组件内部读取返回数据的嵌套属性就会触发Cannot read property "down" of undefined报错，这是你当前遇到错误的核心原因。
• 第三：测试逻辑冗余
  你在beforeEach中用shallow渲染的wrapper变量在测试用例中完全未使用，属于无效代码可以直接删除。

修复后完整测试代码（Enzyme版本） #

import React from "react";
import Enzyme, { mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import axios from "axios.js";
import "@testing-library/jest-dom";
import SegmentationLanding from "./SegmentationLanding";
import { BrowserRouter } from "react-router-dom";

Enzyme.configure({ adapter: new Adapter() });

jest.mock("axios.js");
// 按照实际接口返回结构填充mock值，补全组件需要的所有字段
axios.get.mockResolvedValue({
  data: {
    // 示例字段，请替换为你实际接口返回的内容
    list: [],
    // 如果你组件代码中用到了xx.down的写法，必须在这里定义对应层级的属性
    xx: { down: false }
  }
});

const flushPromises = () => {
  return new Promise((resolve) => setImmediate(resolve));
};

describe(`The segmentation lists`, () => {
  test("verify button is disabled", async () => {
    const wrapper = mount(
      <BrowserRouter>
        <SegmentationLanding />
      </BrowserRouter>
    );
    // 等待所有异步请求执行完成
    await flushPromises();
    // Enzyme查询带对应testId的元素
    const btn = wrapper.find('[data-testid="jest-tester"]').getDOMNode();
    expect(btn).toBeDisabled();
  });
});

如果修复mock返回后依然报错，可以在组件的接口请求回调中打印返回数据，确认你用到的所有嵌套字段都已经在mock值中定义。

内容的提问来源于stack exchange，提问作者sara1112