From 73c8729a93848e4792b93423144d3ca045e4ecd0 Mon Sep 17 00:00:00 2001 From: cdaringe Date: Fri, 28 Apr 2017 01:34:11 -0700 Subject: [PATCH 1/5] :art: add first class debugging support --- packages/react-scripts/bin/react-scripts.js | 11 ++--- .../config/jest/babelTransform.js | 1 + packages/react-scripts/scripts/test.js | 20 +++++++- .../react-scripts/scripts/utils/debugArgs.js | 48 +++++++++++++++++++ .../scripts/utils/getSubscriptArgs.js | 25 ++++++++++ 5 files changed, 98 insertions(+), 7 deletions(-) create mode 100644 packages/react-scripts/scripts/utils/debugArgs.js create mode 100644 packages/react-scripts/scripts/utils/getSubscriptArgs.js diff --git a/packages/react-scripts/bin/react-scripts.js b/packages/react-scripts/bin/react-scripts.js index 8a1175c99ea..0c5b8ffa6d0 100755 --- a/packages/react-scripts/bin/react-scripts.js +++ b/packages/react-scripts/bin/react-scripts.js @@ -12,18 +12,17 @@ var spawn = require('cross-spawn'); var script = process.argv[2]; -var args = process.argv.slice(3); +var getArgs = require('../scripts/utils/getSubscriptArgs'); switch (script) { case 'build': case 'eject': case 'start': case 'test': - var result = spawn.sync( - 'node', - [require.resolve('../scripts/' + script)].concat(args), - { stdio: 'inherit' } - ); + var scriptFilename = require.resolve('../scripts/' + script); + var result = spawn.sync('node', getArgs(scriptFilename), { + stdio: 'inherit', + }); if (result.signal) { if (result.signal === 'SIGKILL') { console.log( diff --git a/packages/react-scripts/config/jest/babelTransform.js b/packages/react-scripts/config/jest/babelTransform.js index bee55b1b156..10aa80451ab 100644 --- a/packages/react-scripts/config/jest/babelTransform.js +++ b/packages/react-scripts/config/jest/babelTransform.js @@ -13,4 +13,5 @@ const babelJest = require('babel-jest'); module.exports = babelJest.createTransformer({ presets: [require.resolve('babel-preset-react-app')], babelrc: false, + sourceMaps: process.env.REACT_APP_DEBUG_JEST ? 'inline' : false, }); diff --git a/packages/react-scripts/scripts/test.js b/packages/react-scripts/scripts/test.js index 5c395999d97..868af8753d4 100644 --- a/packages/react-scripts/scripts/test.js +++ b/packages/react-scripts/scripts/test.js @@ -8,8 +8,16 @@ * of patent rights can be found in the PATENTS file in the same directory. */ // @remove-on-eject-end + +/** + * Greetings! If you are here attempting to start a debugging session, please + * ensure that your debugger of choice is configured to enable source maps, + * otherwise your code may appear mangled by babel! + */ 'use strict'; +var debugArgs = require('./utils/debugArgs'); + process.env.NODE_ENV = 'test'; process.env.PUBLIC_URL = ''; @@ -27,13 +35,23 @@ process.on('unhandledRejection', err => { require('dotenv').config({ silent: true }); const jest = require('jest'); -const argv = process.argv.slice(2); +let argv = process.argv.slice(2); +const isDebug = !!process.env.REACT_APP_DEBUG_JEST; +const isRunInBand = argv.indexOf('--runInBand') > -1 || argv.indexOf('-i') > -1; // Watch unless on CI or in coverage mode if (!process.env.CI && argv.indexOf('--coverage') < 0) { argv.push('--watch'); } +// Force debug into single worker +if (isDebug) { + if (!isRunInBand) { + argv.push('--runInBand'); + } + argv = debugArgs.removeFrom(argv); +} + // @remove-on-eject-begin // This is not necessary after eject because we embed config into package.json. const createJestConfig = require('./utils/createJestConfig'); diff --git a/packages/react-scripts/scripts/utils/debugArgs.js b/packages/react-scripts/scripts/utils/debugArgs.js new file mode 100644 index 00000000000..2e05b317e6f --- /dev/null +++ b/packages/react-scripts/scripts/utils/debugArgs.js @@ -0,0 +1,48 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ +'use strict'; + +const DEBUG_FLAGS = [ + /^debug$/, + /^--debug$/, + /^--debug-brk(=\d+)?$/, + /^--inspect$/, + /^--inspect-brk(=\d+)?$/, +]; + +module.exports = { + _match: function _matchDebugFlags(args, onMatch) { + for (var i in args) { + if (args.hasOwnProperty(i)) { + for (var j in DEBUG_FLAGS) { + if (DEBUG_FLAGS.hasOwnProperty(j)) { + if (args[i].match(DEBUG_FLAGS[j])) { + onMatch(args[i]); + } + } + } + } + } + }, + getFrom: function getDebugFlags(args) { + var matches = []; + this._match(args, function addMatch(arg) { + matches.push(arg); + }); + return matches.length ? matches : null; + }, + removeFrom: function removeDebugFlags(args) { + var matches = this.getFrom(args) || []; + return args.filter(function isNotDebugArg(arg) { + return !matches.some(function isPresent(debugArg) { + return arg === debugArg; + }); + }); + }, +}; diff --git a/packages/react-scripts/scripts/utils/getSubscriptArgs.js b/packages/react-scripts/scripts/utils/getSubscriptArgs.js new file mode 100644 index 00000000000..602e5f6f8b8 --- /dev/null +++ b/packages/react-scripts/scripts/utils/getSubscriptArgs.js @@ -0,0 +1,25 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ +'use strict'; + +var debugArgs = require('../utils/debugArgs'); + +module.exports = function getSubscriptArgs(scriptFilename) { + var args = process.argv.slice(3); + var passedDebugArgs; + var nonDebugArgs; + args.unshift(scriptFilename); + passedDebugArgs = debugArgs.getFrom(args); + if (passedDebugArgs) { + process.env.REACT_APP_DEBUG_JEST = 'true'; // :eyes: side-effect + nonDebugArgs = debugArgs.removeFrom(args); + args = passedDebugArgs.concat(nonDebugArgs); + } + return args; +}; From 01ab6c9ab743d7de5b481d42fcb760188c117620 Mon Sep 17 00:00:00 2001 From: Christopher Dieringer Date: Sat, 29 Apr 2017 10:54:50 -0700 Subject: [PATCH 2/5] :fire: drop --debug* --- packages/react-scripts/scripts/utils/debugArgs.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react-scripts/scripts/utils/debugArgs.js b/packages/react-scripts/scripts/utils/debugArgs.js index 2e05b317e6f..92c501f7693 100644 --- a/packages/react-scripts/scripts/utils/debugArgs.js +++ b/packages/react-scripts/scripts/utils/debugArgs.js @@ -10,8 +10,6 @@ const DEBUG_FLAGS = [ /^debug$/, - /^--debug$/, - /^--debug-brk(=\d+)?$/, /^--inspect$/, /^--inspect-brk(=\d+)?$/, ]; From f51b7d227342f145532118f656523e23938be327 Mon Sep 17 00:00:00 2001 From: cdaringe Date: Sun, 30 Apr 2017 21:04:09 -0700 Subject: [PATCH 3/5] Revert ":fire: drop --debug*" per https://tinyurl.com/k546ycf This reverts commit 01ab6c9ab743d7de5b481d42fcb760188c117620. See https://github.com/facebook/jest/issues/1652 for more. --inspect isn't honored reliably in jest ATM. --- packages/react-scripts/scripts/utils/debugArgs.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-scripts/scripts/utils/debugArgs.js b/packages/react-scripts/scripts/utils/debugArgs.js index 92c501f7693..2e05b317e6f 100644 --- a/packages/react-scripts/scripts/utils/debugArgs.js +++ b/packages/react-scripts/scripts/utils/debugArgs.js @@ -10,6 +10,8 @@ const DEBUG_FLAGS = [ /^debug$/, + /^--debug$/, + /^--debug-brk(=\d+)?$/, /^--inspect$/, /^--inspect-brk(=\d+)?$/, ]; From 3e5e51ccbaa8f5d081d1291fc30bcfd00def4ae4 Mon Sep 17 00:00:00 2001 From: cdaringe Date: Sun, 30 Apr 2017 21:16:57 -0700 Subject: [PATCH 4/5] fix(debug): disable inspect support per facebook/jest#1652 --- packages/react-scripts/scripts/utils/debugArgs.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/scripts/utils/debugArgs.js b/packages/react-scripts/scripts/utils/debugArgs.js index 2e05b317e6f..66ab12c8a13 100644 --- a/packages/react-scripts/scripts/utils/debugArgs.js +++ b/packages/react-scripts/scripts/utils/debugArgs.js @@ -12,8 +12,8 @@ const DEBUG_FLAGS = [ /^debug$/, /^--debug$/, /^--debug-brk(=\d+)?$/, - /^--inspect$/, - /^--inspect-brk(=\d+)?$/, + // /^--inspect$/, // not supported. see https://github.com/facebook/jest/issues/1652 + // /^--inspect-brk(=\d+)?$/, ]; module.exports = { From fdd44744643ab055f669c457ee23a61b6104d4b1 Mon Sep 17 00:00:00 2001 From: cdaringe Date: Sun, 30 Apr 2017 21:37:45 -0700 Subject: [PATCH 5/5] docs(test): add debug instructions --- packages/react-scripts/template/README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index da55a2e58a7..405a2467e47 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -59,6 +59,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Disabling jsdom](#disabling-jsdom) - [Snapshot Testing](#snapshot-testing) - [Editor Integration](#editor-integration) + - [Test Debugging](#test-debugging) - [Developing Components in Isolation](#developing-components-in-isolation) - [Making a Progressive Web App](#making-a-progressive-web-app) - [Deployment](#deployment) @@ -1186,6 +1187,16 @@ If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest ![VS Code Jest Preview](https://cloud.githubusercontent.com/assets/49038/20795349/a032308a-b7c8-11e6-9b34-7eeac781003f.png) +### Test Debugging + +You can debug your tests by passing the usual debug flags to `npm test`. + +For example: + - Run `npm test -- --debug-brk` to attach the the debugger using your debugger of choice (vscode webstorm, etc). + - Run `npm test -- debug` to enter the CLI debugger. + +**Note**: `--inspect/--inspect-brk` are not yet supported. See facebook/jest#1652. + ## Developing Components in Isolation Usually, in an app, you have a lot of UI components, and each of them has many different states.