React组件条件渲染单元测试：Enzyme查找目标组件长度为0问题求助

• shallow渲染层级问题：你当前用shallow渲染的根节点是<AuthContext.Provider>，shallow渲染只会渲染当前根组件的第一层，不会向下渲染子组件的内部逻辑，所以此时的wrapper里只能找到<Home />组件占位，无法访问Home内部的LoggedInHome、LoggedOutHome组件。
• Context传值不匹配：Home组件中useAuth()返回的是包含user属性的对象（你代码里写了const { user } = useAuth()），但你给Provider的value直接传了user对象本身，导致useAuth()解构出来的user实际上是undefined，条件渲染逻辑直接异常。
• 测试场景未拆分：你把登录态的Provider写在了全局beforeEach里，两个测试用例都跑在已登录的上下文下，未登录的测试用例实际没有对应的无用户上下文支撑。
• 遗漏Enzyme适配器初始化：原测试代码没有执行configure({ adapter: new Adapter() })，也会导致渲染逻辑异常。

1. 修正Context传值 #

将Provider的value从value={user}改为value={{ user }}，匹配useAuth的返回结构。

2. 调整渲染逻辑获取Home组件内部内容 #

渲染后先找到Home组件，调用dive()方法深入渲染Home的内部结构，才能找到对应的子组件。

3. 拆分不同登录态的测试场景 #

每个测试用例单独设置对应上下文，保证场景隔离。

import React from 'react'
import {shallow, configure} from 'enzyme'
import Adapter from "enzyme-adapter-react-16";
import "@testing-library/jest-dom/extend-expect";
import Home from "../Home";
import LoggedInHome from "../Dashboard";
import LoggedOutHome from "../LoggedOutHome";
import { AuthContext } from "../AuthContext";

// 初始化enzyme适配器
configure({ adapter: new Adapter() });

describe("Homepage", () => {
  // 已登录场景测试
  it("should display LoggedInHome if logged in", () => {
    const user = { displayName: "James", email: "g@gmail.com", emailVerified: true };
    const wrapper = shallow(
      <AuthContext.Provider value={{ user }}>
        <Home />
      </AuthContext.Provider>
    );
    // 深入渲染Home组件内部内容
    const homeWrapper = wrapper.find(Home).dive();
    expect(homeWrapper.find(LoggedInHome)).toHaveLength(1);
    expect(homeWrapper.find(LoggedOutHome)).toHaveLength(0);
  });

  // 未登录场景测试
  it("should display LoggedOutHome if not logged in", () => {
    const wrapper = shallow(
      <AuthContext.Provider value={{ user: null }}>
        <Home />
      </AuthContext.Provider>
    );
    const homeWrapper = wrapper.find(Home).dive();
    expect(homeWrapper.find(LoggedOutHome)).toHaveLength(1);
    expect(homeWrapper.find(LoggedInHome)).toHaveLength(0);
  });
});

如果修改后仍有问题，可以将shallow替换为mount进行全量渲染，不需要调用dive()即可直接访问所有嵌套子组件。

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