Karma 和 React，有导致错误的警告

Question

我正在使用 Karma with mocha to test my React 个组件。当 PropTypes 不匹配时，我会显示一些警告。然而，让这些警告导致实际错误真的很有趣，就像跟踪测试并修复它一样。

你知道这是如何实现的吗？

Answer 1

您可以用自己的方法替换 console.warn 方法，并在提供的消息与特定模式匹配时抛出。

let warn = console.warn;
console.warn = function(warning) {
  if (/(Invalid prop|Failed propType)/.test(warning)) {
    throw new Error(warning);
  }
  warn.apply(console, arguments);
};

Answer 2

对已接受答案的小改进：console.error 而不是 spain-train 提到的 console.warn，将 'Failed prop type' 添加到正则表达式，因为只有这样它才适用于 React 15.3.1 , 并使代码更加严格 eslint 友好。

const error = console.error;
console.error = function(warning, ...args) {
  if (/(Invalid prop|Failed prop type)/.test(warning)) {
    throw new Error(warning);
  }
  error.apply(console, [warning, ...args]);
};

Answer 3

2021 年更新：

const consoleError = console.error;

console.error = function (...args) {

  if (/(Invalid prop|Failed propType|Failed .+ type)/.test(args[0])) {

    const errorMessage = args.reduce((p, c) => p.replace(/%s/, c));

    throw new Error(errorMessage);
  }

  consoleError.apply(console, args);
};

Failed prop type 现在是 Failed %s type: %s%s。它使用 string substitutions to write to console. Here 是 React 中的代码。

Karma 和 React，有导致错误的警告

Karma and React, have warnings to cause errors

reactjs

mocha.js

karma-runner

karma-mocha