使用Jest+React Testing Library测试自定义React propTypes校验器失败问题

你遇到的核心问题是：React的prop-types默认在开发模式下只会输出警告到控制台，并不会抛出一个可被toThrowError()捕获的Error实例。所以你的测试函数里的render操作虽然触发了prop校验失败，但并没有抛出错误，导致expect(...).toThrowError()断言失败。

方案一：监听控制台警告，断言警告内容 #

这种方法更贴近组件实际运行的行为（毕竟真实场景中prop-types只是打印警告），我们可以用Jest来监听console.error，然后断言它是否输出了预期的警告信息：

test('logs warning when incorrect aspect ratio format passed', () => {
  // 先mock console.error，避免测试过程中真的输出警告
  const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

  // 渲染带有错误prop的组件
  render(
    <Picture alt="Hello, picture." aspectRatio="1-1/8" src="test/books.jpg" />,
  );

  // 断言console.error被调用，且包含我们预期的错误提示文本
  expect(consoleErrorSpy).toHaveBeenCalledWith(
    expect.stringContaining('Invalid value format “1-1/8” supplied to “aspectRatio” prop in “Picture” component')
  );

  // 恢复原有的console.error，避免影响其他测试用例
  consoleErrorSpy.mockRestore();
});

方案二：直接测试prop校验器逻辑 #

如果你更想聚焦于校验器本身的错误抛出逻辑，可以使用prop-types提供的checkPropTypes函数，它在校验失败时会直接抛出错误（注意：该行为仅在非production环境生效）：

首先，确保你的组件导出了propTypes对象（方便测试直接引用）：

// Picture.js
import PropTypes from 'prop-types';

export const PicturePropTypes = {
  alt: PropTypes.string.isRequired,
  src: PropTypes.string.isRequired,
  aspectRatio: (props, propName, componentName) => { 
    // 你的校验逻辑代码
  },
};

const Picture = (props) => {
  // 组件渲染逻辑
};

Picture.propTypes = PicturePropTypes;
export default Picture;

然后编写测试用例：

// Picture.test.js
import { checkPropTypes } from 'prop-types';
import { PicturePropTypes } from './Picture';

test('throws error when incorrect aspect ratio format passed', () => {
  const invalidProps = {
    alt: "Hello, picture.",
    aspectRatio: "1-1/8",
    src: "test/books.jpg"
  };

  // 调用checkPropTypes，它会在校验失败时抛出错误
  expect(() => {
    checkPropTypes(PicturePropTypes, invalidProps, 'prop', 'Picture');
  }).toThrowError('Invalid value format “1-1/8” supplied to “aspectRatio” prop in “Picture” component. Expected something like “3:2”.');
});

• 如果你想测试组件在真实渲染时的行为（警告输出），选方案一；
• 如果你只想单独验证校验器的逻辑正确性，选方案二，它更直接且不需要渲染整个组件。

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