@commercetools-frontend/jest-preset-mc-app 21.15.0 → 21.16.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @commercetools-frontend/jest-preset-mc-app
 
+## 21.16.0
+
+### Patch Changes
+
+- [#2820](https://github.com/commercetools/merchant-center-application-kit/pull/2820) [`1af9292da`](https://github.com/commercetools/merchant-center-application-kit/commit/1af9292daf3a09224551383918c2d00da43bbbee) Thanks [@emmenko](https://github.com/emmenko)! - Improve output of console usage in tests
+
+- [#2580](https://github.com/commercetools/merchant-center-application-kit/pull/2580) [`1c40c40c9`](https://github.com/commercetools/merchant-center-application-kit/commit/1c40c40c947574ba24b411c9376640bb18c489ac) Thanks [@renovate](https://github.com/apps/renovate)! - Update `@testing-library/react-hooks` package to version `8.0.0`.
+
+- Updated dependencies []:
+  - @commercetools-frontend/babel-preset-mc-app@21.16.0
+
 ## 21.15.0
 
 ### Patch Changes

package/fail-on-console.js

@@ -0,0 +1,123 @@
+// This module is based on the package `jest-fail-on-console` but with some custom adjustments.
+const util = require('util');
+const colors = require('colors/safe');
+
+const defaultErrorMessage = (methodName, bold) =>
+  `Expected test not to call ${bold(`console.${methodName}()`)}.\n\n` +
+  `If the ${methodName} is expected, test for it explicitly by mocking it out using ${bold(
+    'jest.spyOn'
+  )}(console, '${methodName}').mockImplementation() and test that the warning occurs.`;
+
+const failOnConsole = ({
+  errorMessage = defaultErrorMessage,
+  shouldFailOnAssert = false,
+  shouldFailOnDebug = false,
+  shouldFailOnLog = false,
+  shouldFailOnInfo = false,
+  shouldFailOnWarn = true,
+  shouldFailOnError = true,
+  skipTest,
+  silenceMessage,
+  logButNotThrowMessage,
+} = {}) => {
+  const flushUnexpectedConsoleCalls = (
+    methodName,
+    unexpectedConsoleCallStacks
+  ) => {
+    if (unexpectedConsoleCallStacks.length > 0) {
+      const messages = unexpectedConsoleCallStacks.map(([stack, message]) => {
+        const stackLines = stack.split('\n');
+        return (
+          `${colors.red(message)}\n` +
+          `${stackLines
+            .map((line, index) => {
+              if (index === stackLines.length - 1) {
+                return colors.white(line);
+              }
+              return colors.gray(line);
+            })
+            .join('\n')}`
+        );
+      });
+
+      const message = errorMessage(methodName, colors.bold);
+
+      throw new Error(`${message}\n\n${messages.join('\n\n')}`);
+    }
+  };
+
+  const patchConsoleMethod = (methodName) => {
+    let originalMethod = console[methodName];
+
+    const unexpectedConsoleCallStacks = [];
+
+    const captureMessage = (format, ...args) => {
+      const message = util.format(format, ...args);
+
+      if (silenceMessage && silenceMessage(message, methodName)) {
+        return;
+      }
+
+      if (logButNotThrowMessage && logButNotThrowMessage(message, methodName)) {
+        originalMethod(format, ...args);
+        return;
+      }
+
+      // Capture the call stack now so we can warn about it later.
+      // The call stack has helpful information for the test author.
+      // Don't throw yet though b'c it might be accidentally caught and suppressed.
+      const { stack } = new Error();
+      if (stack) {
+        unexpectedConsoleCallStacks.push([
+          stack.substr(stack.indexOf('\n') + 1),
+          message,
+        ]);
+      }
+    };
+
+    const newAssertMethod = (assertion, format, ...args) => {
+      if (assertion) {
+        return;
+      }
+
+      captureMessage(format, ...args);
+    };
+
+    const newMethod =
+      methodName === 'assert' ? newAssertMethod : captureMessage;
+
+    const canSkipTest = () => {
+      const currentTestState = expect.getState();
+      const testName = currentTestState.currentTestName;
+      const testPath = currentTestState.testPath;
+
+      if (skipTest && skipTest({ testName, testPath })) return true;
+
+      return false;
+    };
+    const shouldSkipTest = canSkipTest();
+
+    beforeEach(() => {
+      if (shouldSkipTest) return;
+
+      console[methodName] = newMethod; // eslint-disable-line no-console
+      unexpectedConsoleCallStacks.length = 0;
+    });
+
+    afterEach(() => {
+      if (shouldSkipTest) return;
+
+      flushUnexpectedConsoleCalls(methodName, unexpectedConsoleCallStacks);
+      console[methodName] = originalMethod;
+    });
+  };
+
+  if (shouldFailOnAssert) patchConsoleMethod('assert');
+  if (shouldFailOnDebug) patchConsoleMethod('debug');
+  if (shouldFailOnLog) patchConsoleMethod('log');
+  if (shouldFailOnInfo) patchConsoleMethod('info');
+  if (shouldFailOnWarn) patchConsoleMethod('warn');
+  if (shouldFailOnError) patchConsoleMethod('error');
+};
+
+module.exports = failOnConsole;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/jest-preset-mc-app",
-  "version": "21.15.0",
+  "version": "21.16.0",
   "description": "Jest preset used by a MC application",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -17,7 +17,7 @@
   "main": "./jest-preset.js",
   "module": "./jest-preset.js",
   "dependencies": {
-    "@commercetools-frontend/babel-preset-mc-app": "21.15.0",
+    "@commercetools-frontend/babel-preset-mc-app": "21.16.0",
     "@formatjs/intl-getcanonicallocales": "^1.9.2",
     "@formatjs/intl-listformat": "^6.5.3",
     "@formatjs/intl-locale": "^2.4.47",

package/setup-test-framework.js

@@ -23,7 +23,66 @@ require('@formatjs/intl-pluralrules/locale-data/fr');
 
 const { configure: configureRtl } = require('@testing-library/react');
 const loadConfig = require('./load-config');
+const failOnConsole = require('./fail-on-console');
 
 const jestConfig = loadConfig();
 
 configureRtl(jestConfig.rtlConfig);
+
+let additionalSilencedWarnings = [];
+let additionalNonThrowingWarnings = [];
+
+function hasMatchingRegexForMessage(messages, msgRegExps) {
+  return msgRegExps.some((msgRegex) =>
+    messages.some((msg) => msgRegex.test(msg))
+  );
+}
+
+function shouldSilenceWarnings(...messages) {
+  const silencedByJestConfig = hasMatchingRegexForMessage(
+    messages,
+    jestConfig.silenceConsoleWarnings
+  );
+  const additionallySilenced = hasMatchingRegexForMessage(
+    messages,
+    additionalSilencedWarnings
+  );
+
+  return silencedByJestConfig || additionallySilenced;
+}
+
+function shouldNotThrowWarnings(...messages) {
+  const notThrowingByJestConfig = hasMatchingRegexForMessage(
+    messages,
+    jestConfig.notThrowWarnings
+  );
+  const additionallyNonThrowing = hasMatchingRegexForMessage(
+    messages,
+    additionalNonThrowingWarnings
+  );
+
+  return notThrowingByJestConfig || additionallyNonThrowing;
+}
+
+failOnConsole({
+  shouldFailOnLog: true,
+  shouldFailOnInfo: true,
+  shouldFailOnWarn: true,
+  shouldFailOnError: true,
+  silenceMessage: (message) => {
+    if (!process.env.CI) {
+      return false;
+    }
+    return shouldSilenceWarnings(message);
+  },
+  logButNotThrowMessage: (message) => {
+    return shouldNotThrowWarnings(message);
+  },
+});
+
+global.console.config = {};
+
+global.console.config.addSilencedWarning = (rexExp) =>
+  additionalSilencedWarnings.push(rexExp);
+global.console.config.addNonThrowingWarning = (rexExp) =>
+  additionalNonThrowingWarnings.push(rexExp);

package/setup-tests.js

@@ -1,9 +1,5 @@
 const util = require('util');
-const colors = require('colors/safe');
 const MutationObserver = require('@sheerun/mutationobserver-shim');
-const loadConfig = require('./load-config');
-
-const jestConfig = loadConfig();
 
 global.window.app = {
   applicationName: 'my-app',
@@ -24,89 +20,3 @@ Object.defineProperty(window, 'TextDecoder', {
   writable: true,
   value: util.TextDecoder,
 });
-
-let additionalSilencedWarnings = [];
-let additionalNonThrowingWarnings = [];
-
-function hasMatchingRegexForMessage(messages, msgRegExps) {
-  return msgRegExps.some((msgRegex) =>
-    messages.some((msg) => msgRegex.test(msg))
-  );
-}
-
-function shouldSilenceWarnings(...messages) {
-  const silencedByJestConfig = hasMatchingRegexForMessage(
-    messages,
-    jestConfig.silenceConsoleWarnings
-  );
-  const additionallySilenced = hasMatchingRegexForMessage(
-    messages,
-    additionalSilencedWarnings
-  );
-
-  return silencedByJestConfig || additionallySilenced;
-}
-
-function shouldNotThrowWarnings(...messages) {
-  const notThrowingByJestConfig = hasMatchingRegexForMessage(
-    messages,
-    jestConfig.notThrowWarnings
-  );
-  const additionallyNonThrowing = hasMatchingRegexForMessage(
-    messages,
-    additionalNonThrowingWarnings
-  );
-
-  return notThrowingByJestConfig || additionallyNonThrowing;
-}
-
-// setup file
-function logOrThrow(log, method, messages) {
-  let warning = `@commercetools-frontend/jest-preset-mc-app: console.${method} calls should not be used in tests.`;
-  if (process.env.CI) {
-    if (shouldSilenceWarnings(messages)) return;
-
-    log(warning, '\n', ...messages);
-
-    // NOTE: That some warnings should be logged allowing us to refactor graceully
-    // without having to introduce a breaking change.
-    if (shouldNotThrowWarnings(messages)) return;
-
-    warning = `@commercetools-frontend/jest-preset-mc-app: console.${method} calls not allowed in tests.`;
-
-    throw new Error(...messages);
-  } else {
-    log(colors.bgYellow.black(' WARN '), warning, '\n', ...messages);
-  }
-}
-
-// eslint-disable-next-line no-console
-const logMessage = console.log;
-global.console.log = (...messages) => {
-  logOrThrow(logMessage, 'log', messages);
-};
-
-// eslint-disable-next-line no-console
-const logInfo = console.info;
-global.console.info = (...messages) => {
-  logOrThrow(logInfo, 'info', messages);
-};
-
-// eslint-disable-next-line no-console
-const logWarning = console.warn;
-global.console.warn = (...messages) => {
-  logOrThrow(logWarning, 'warn', messages);
-};
-
-// eslint-disable-next-line no-console
-const logError = console.error;
-global.console.error = (...messages) => {
-  logOrThrow(logError, 'error', messages);
-};
-
-global.console.config = {};
-
-global.console.config.addSilencedWarning = (rexExp) =>
-  additionalSilencedWarnings.push(rexExp);
-global.console.config.addNonThrowingWarning = (rexExp) =>
-  additionalNonThrowingWarnings.push(rexExp);