如何使用 Jest 测试 React 函数组件状态？答案

【问题标题】：How do you test a React function component state with Jest?如何使用 Jest 测试 React 函数组件状态？
【发布时间】：2021-10-06 16:30:50
【问题描述】：

我现在才开始进行单元测试，我正在学习的课程具有以下测试语法：

expect(app.state().gifts).toEqual([])

这是使用类组件的语法，但很快就会被弃用，所以我改用 React 函数组件。

你如何用钩子完成同样的测试？

谢谢

【问题讨论】：

React 钩子是指 React 函数组件吗？听起来您在问如何测试功能组件。在这一点上，我建议放弃酶并改用 React-Testing-Library 来满足您的 UI 组件测试需求。
编辑了我的问题，谢谢@DrewReese
您似乎已经澄清了您的意思是测试基于功能的组件，然后接受了涵盖测试挂钩的答案。这很令人困惑。请注意，您也不应该在基于类的组件中断言状态；测试行为，而不是执行。

标签： reactjs unit-testing jestjs enzyme

【解决方案1】：

您也可以使用react-hooks-testing-library 并测试您的钩子。 Basic Hooks

例子：

useDisclosure.ts

import * as React from 'react';

export const useDisclosure = (initial = false) => {
  const [isOpen, setIsOpen] = React.useState(initial);
  const open = React.useCallback(() => setIsOpen(true), []);
  const close = React.useCallback(() => setIsOpen(false), []);
  const toggle = React.useCallback(() => setIsOpen((state) => !state), []);

  return { isOpen, open, close, toggle };
};

useDisclosure.test.ts

import { renderHook, act } from '@testing-library/react-hooks';
import { useDisclosure } from '../useDisclosure';

test('should open the state', () => {
  const { result } = renderHook(() => useDisclosure());
  expect(result.current.isOpen).toBe(false);
  act(() => {
    result.current.open();
  });
  expect(result.current.isOpen).toBe(true);
});

test('should close the state', () => {
  const { result } = renderHook(() => useDisclosure());
  expect(result.current.isOpen).toBe(false);
  act(() => {
    result.current.close();
  });
  expect(result.current.isOpen).toBe(false);
});

test('should toggle the state', () => {
  const { result } = renderHook(() => useDisclosure());
  expect(result.current.isOpen).toBe(false);
  act(() => {
    result.current.toggle();
  });
  expect(result.current.isOpen).toBe(true);
  act(() => {
    result.current.toggle();
  });
  expect(result.current.isOpen).toBe(false);
});

test('should define initial state', () => {
  const { result } = renderHook(() => useDisclosure(true));
  expect(result.current.isOpen).toBe(true);
  act(() => {
    result.current.toggle();
  });
  expect(result.current.isOpen).toBe(false);
});

【讨论】：