CODEWITHSUNDEEP
reactjsmocha.jskarma-runnerkarma-mocha
gcedo
gcedo

Reputation: 4931

Karma and React, have warnings to cause errors

I am using Karma with mocha to test my React components. I have some warnings displayed when the PropTypes are not matched. However it would be really interesting to have these warnings to cause an actual error, as to track down the test and fix it.

Do you know how this could be achieved?

Upvotes: 14

Views: 3261

Answers (3)

Alecu Marian Alexandru
Alecu Marian Alexandru

Reputation: 705

2021 update:

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 is now Failed %s type: %s%s. It uses string substitutions to write to console. Here is the code in React.

Upvotes: 0

chmurson
chmurson

Reputation: 619

Small improvements to accepted answer: console.error instead of console.warn as spain-train mentioned, added 'Failed prop type' to regex, as only then it works with React 15.3.1, and made the code more strict eslint friendly.

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]);
};

Upvotes: 11

Alexandre Kirszenberg
Alexandre Kirszenberg

Reputation: 36408

You can replace the console.warn method with your own and throw when the message provided matches a certain pattern.

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

Upvotes: 19

Related Questions