组件条件渲染的单元测试答案

【问题标题】：Unit Testing for Conditional Rendering of Components组件条件渲染的单元测试
【发布时间】：2021-09-07 05:14:36
【问题描述】：

对 React 世界很陌生，想问一下如何测试条件渲染。

Home.js

export default function Home() {
   const { user } = useAuth(); 
   
   return (
      <>
         <Container className="pt-5 mt-5">
            {user ? <LoggedInHome /> : <LoggedOutHome />}
         </Container>
      </>
   ); 
}

Home.test.js

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

let wrapper;
const user = { displayName: "James", email: "g@gmail.com", 
emailVerified: true };

describe("Homepage", () => {
  beforeEach(() => {
      wrapper = shallow(
        <AuthContext.Provider value={user}>
            <Home />
        </AuthContext.Provider>
   );
  });

  it("should display LoggedOutHome if not logged in", () => {
      expect(wrapper.find(LoggedOutHome)).toHaveLength(0)
  });

  it("should display LoggedInHome if logged in", () => {
      expect(wrapper.find(LoggedInHome)).toHaveLength(1);
  });
});

这是我得到的错误：

expect(received).toHaveLength(expected)

Expected length: 1
Received length: 0
Received object: {}

  27 |
  28 |     it("should display LoggedInHome if logged in", () => {
> 29 |         expect(wrapper.find(LoggedInHome)).toHaveLength(1);
     |                                         ^
  30 |     });
  31 | });

似乎 LoggedInHome 和 LoggedOutHome 的长度都是 0。不确定这里发生了什么。感谢您的帮助！

【问题讨论】：

鉴于您才刚刚开始，我建议使用 testing-library.com 有很多原因，我会保持简短：- 酶适配器尚未准备好反应 17 和 18 - 酶测试倾向于对底层实现“了解”太多。这使得维护测试变得更加困难。也就是说，花一些时间阅读测试库文档。尽可能少地模拟，并尝试尽可能接近地复制实际的用户交互。

标签： reactjs jestjs conditional-statements enzyme

【解决方案1】：

您安装的不是Home，而是Homepage？

一般来说，您希望模拟 getAuth() 函数以返回用户并返回 undefined 以检查这两个值。

【讨论】：

对不起，它应该是主页而不是主页，编辑它。您如何将要传递给 Home 的用户模拟值传递给 Home？