如何让Enzyme在TypeScript环境下校验组件Props并使测试失败？

嘿，这个问题我太熟了！在React + TypeScript的TDD流程里，确实没必要混用PropTypes，毕竟TS的类型系统已经足够强大。下面给你几个靠谱的方案，能让测试在Props无效或缺失时自动失败：

1. 先把编译时类型检查拉满（最推荐） #

TypeScript本来就是编译时做类型校验的，所以首先得确保你的测试流程先过一遍TS的严格检查，这样还没跑测试就能揪出缺失/无效Props的问题。

• 第一步：检查你的tsconfig.json，确保开启了严格模式：

  {
    "compilerOptions": {
      "strict": true,
      "noImplicitAny": true,
      "jsx": "react-jsx"
      // 其他配置...
    }
  }
  

• 第二步：修改package.json里的测试脚本，让它先跑TS编译检查再执行Jest：

  "scripts": {
    "test": "tsc --noEmit && jest"
  }
  

这样每次跑测试前，TS会先检查所有.ts/.tsx文件的类型，比如你写<Avatar />没传必填Props，TS编译直接报错，测试根本不会启动，完美从源头拦截问题。

2. 运行时验证：自定义类型守卫（适合需要强运行时检查的场景） #

如果你的组件可能接收来自外部（比如API）的不确定数据，或者你想在测试中主动验证Props合法性，可以写一个类型守卫函数，在组件或测试里做运行时校验：

首先，写个类型守卫：

// Avatar.tsx
type Props = { imageUrl: string; alt: string; };

const isAvatarProps = (props: unknown): props is Props => {
  const candidate = props as Props;
  return typeof candidate?.imageUrl === 'string' && typeof candidate?.alt === 'string';
};

const Avatar: React.FC<Props> = (props) => {
  // 在组件内部校验，不合法直接抛错
  if (!isAvatarProps(props)) {
    throw new Error('Avatar组件接收了无效的Props！');
  }

  // 组件正常逻辑...
  return <div><img src={props.imageUrl} alt={props.alt} /></div>;
};

然后在测试里验证：

// Avatar.test.tsx
it('当Props缺失时抛出错误', () => {
  expect(() => {
    // 用类型断言绕过TS编译检查，模拟无效Props的情况
    shallow(<Avatar {...({} as unknown as Props)} />);
  }).toThrow('Avatar组件接收了无效的Props！');
});

这样不管是开发还是测试，只要Props不合法，组件就会直接抛错，测试能精准捕获。

3. 利用React开发模式的警告转错误（适合Enzyme场景） #

Enzyme有时候不会触发React开发模式下的Props警告，你可以通过mockconsole.error来捕获这些警告，然后让测试失败：

// Avatar.test.tsx
describe('Avatar', () => {
  // 在每个测试前mock console.error
  beforeEach(() => {
    jest.spyOn(console, 'error').mockImplementation(() => {});
  });

  // 测试后恢复原始console.error
  afterEach(() => {
    (console.error as jest.Mock).mockRestore();
  });

  it('传入合法Props时不会触发控制台错误', () => {
    shallow(<Avatar imageUrl="test.png" alt="用户头像" />);
    expect(console.error).not.toHaveBeenCalled();
  });

  it('Props缺失时触发控制台错误（测试失败）', () => {
    shallow(<Avatar {...({} as unknown as Props)} />);
    // 如果console.error被调用了，这个断言就会失败，符合你的需求
    expect(console.error).not.toHaveBeenCalled();
  });
});

记得先把测试环境的NODE_ENV设为development，这样React才会输出开发模式的警告。

总结 #

优先用方案1，完全贴合TypeScript的设计理念，不用额外写运行时代码，从编译阶段就把问题拦住。如果需要运行时的强校验，再考虑方案2或3。

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