From 780a4573e791a623d91b3d66b710a1e16f6fe000 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 3 Apr 2018 00:48:07 +0100 Subject: [PATCH 01/12] Add 1.1.2 changelog (#4242) --- CHANGELOG.md | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b79db6b8786..2fcb2d83d22 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,35 @@ +## 1.1.2 (April 3, 2018) + +#### :bug: Bug Fix + +* `react-scripts` + + * [#4085](https://github.com/facebook/create-react-app/pull/4085) Resolve `.js` before `.mjs` files to unbreak dependencies with native ESM support. ([@leebyron](https://github.com/leebyron)) + +#### :memo: Documentation + +* `react-scripts` + + * [#4197](https://github.com/facebook/create-react-app/pull/4197) Add troubleshooting for Github Pages. ([@xnt](https://github.com/xnt)) + +#### Committers: 2 +- Lee Byron ([leebyron](https://github.com/leebyron)) +- Vicente Plata ([xnt](https://github.com/xnt)) + +### Migrating from 1.1.1 to 1.1.2 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.1.2 +``` + +or + +``` +yarn add --exact react-scripts@1.1.2 +``` + ## 1.1.1 (February 2, 2018) #### :bug: Bug Fix From 609aeea67b18fb1a8eb399a1384ea61ca35175af Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 3 Apr 2018 00:48:34 +0100 Subject: [PATCH 02/12] Publish - react-scripts@1.1.2 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 94d8e98df6d..0c19a29df07 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "react-scripts", - "version": "1.1.1", + "version": "1.1.2", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "MIT", From d639e90bfae5dfd206300533102017864890fab0 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 3 Apr 2018 18:03:08 +0100 Subject: [PATCH 03/12] Work around Jest environment resolving bug (#4247) --- packages/react-scripts/package.json | 1 + packages/react-scripts/scripts/test.js | 56 +++++++++++++++++++++++++- 2 files changed, 56 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 0c19a29df07..7ac36b254c0 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -51,6 +51,7 @@ "promise": "8.0.1", "raf": "3.4.0", "react-dev-utils": "^5.0.0", + "resolve": "1.6.0", "style-loader": "0.19.0", "sw-precache-webpack-plugin": "0.11.4", "url-loader": "0.6.2", diff --git a/packages/react-scripts/scripts/test.js b/packages/react-scripts/scripts/test.js index b30113fe662..e057ab70589 100644 --- a/packages/react-scripts/scripts/test.js +++ b/packages/react-scripts/scripts/test.js @@ -24,7 +24,7 @@ process.on('unhandledRejection', err => { require('../config/env'); const jest = require('jest'); -const argv = process.argv.slice(2); +let argv = process.argv.slice(2); // Watch unless on CI or in coverage mode if (!process.env.CI && argv.indexOf('--coverage') < 0) { @@ -46,5 +46,59 @@ argv.push( ) ) ); + +// This is a very dirty workaround for https://github.com/facebook/jest/issues/5913. +// We're trying to resolve the environment ourselves because Jest does it incorrectly. +// TODO: remove this (and the `resolve` dependency) as soon as it's fixed in Jest. +const resolve = require('resolve'); +function resolveJestDefaultEnvironment(name) { + const jestDir = path.dirname( + resolve.sync('jest', { + basedir: __dirname, + }) + ); + const jestCLIDir = path.dirname( + resolve.sync('jest-cli', { + basedir: jestDir, + }) + ); + const jestConfigDir = path.dirname( + resolve.sync('jest-config', { + basedir: jestCLIDir, + }) + ); + return resolve.sync(name, { + basedir: jestConfigDir, + }); +} +let cleanArgv = []; +let env = 'node'; +let next; +do { + next = argv.shift(); + if (next === '--env') { + env = argv.shift(); + } else if (next.indexOf('--env=') === 0) { + env = next.substring('--env='.length); + } else { + cleanArgv.push(next); + } +} while (argv.length > 0); +argv = cleanArgv; +let resolvedEnv; +try { + resolvedEnv = resolveJestDefaultEnvironment(`jest-environment-${env}`); +} catch (e) { + // ignore +} +if (!resolvedEnv) { + try { + resolvedEnv = resolveJestDefaultEnvironment(env); + } catch (e) { + // ignore + } +} +const testEnvironment = resolvedEnv || env; +argv.push('--env', testEnvironment); // @remove-on-eject-end jest.run(argv); From f040d85a76a424d90370e3200f6181ac81f22200 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 3 Apr 2018 18:30:23 +0100 Subject: [PATCH 04/12] Changelog for 1.1.3 --- CHANGELOG.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2fcb2d83d22..aff4aefa082 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,28 @@ +## 1.1.3 (April 3, 2018) + +#### :bug: Bug Fix + +* `react-scripts` + + * [#4247](https://github.com/facebook/create-react-app/pull/4247) Fix `environment.dispose is not a function` error caused by a Jest bug. ([@gaearon](https://github.com/gaearon)) + +#### Committers: 1 +- Dan Abramov ([gaearon](https://github.com/gaearon)) + +### Migrating from 1.1.2 to 1.1.3 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.1.3 +``` + +or + +``` +yarn add --exact react-scripts@1.1.3 +``` + ## 1.1.2 (April 3, 2018) #### :bug: Bug Fix From 408db51973fab34025336f9647105aa7e51c70ab Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 3 Apr 2018 18:30:53 +0100 Subject: [PATCH 05/12] Publish - react-scripts@1.1.3 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 7ac36b254c0..797e95a96a4 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "react-scripts", - "version": "1.1.2", + "version": "1.1.3", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "MIT", From 110fdedef0c28bd5b26e5611e4510163d0a6242c Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 3 Apr 2018 20:07:35 -0400 Subject: [PATCH 06/12] Update detect-port-alt (#4250) --- packages/react-dev-utils/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 18f37c971e4..4261eeb6cd8 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -40,7 +40,7 @@ "babel-code-frame": "6.26.0", "chalk": "1.1.3", "cross-spawn": "5.1.0", - "detect-port-alt": "1.1.5", + "detect-port-alt": "1.1.6", "escape-string-regexp": "1.0.5", "filesize": "3.5.11", "global-modules": "1.0.0", From 305bd7015f5df10ea6dfe30f1e72ac5ec6e0332c Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 3 Apr 2018 20:27:05 -0400 Subject: [PATCH 07/12] Changelog for 1.1.4 --- CHANGELOG.md | 29 +++++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index aff4aefa082..fed2c53f957 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,28 @@ +## 1.1.4 (April 3, 2018) + +#### :bug: Bug Fix + +* `react-dev-utils` + + * [#4250](https://github.com/facebook/create-react-app/pull/4250) Upgrade `detect-port-alt` to fix [#4189](https://github.com/facebook/create-react-app/issues/4189). ([@Timer](https://github.com/Timer)) + +#### Committers: 1 +- Joe Haddad ([Timer](https://github.com/Timer)) + +### Migrating from 1.1.3 to 1.1.4 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.1.4 +``` + +or + +``` +yarn add --exact react-scripts@1.1.4 +``` + ## 1.1.3 (April 3, 2018) #### :bug: Bug Fix @@ -106,7 +131,7 @@ yarn add --exact react-scripts@1.1.1 * `react-error-overlay` * [#3474](https://github.com/facebookincubator/create-react-app/pull/3474) Allow the error overlay to be unregistered. ([@Timer](https://github.com/Timer)) - + * `create-react-app` * [#3408](https://github.com/facebookincubator/create-react-app/pull/3408) Add `--info` flag to help gather bug reports. ([@tabrindle](https://github.com/tabrindle)) @@ -132,7 +157,7 @@ yarn add --exact react-scripts@1.1.1 * `create-react-app` * [#3320](https://github.com/facebookincubator/create-react-app/pull/3320) Fix offline installation to respect proxy from `.npmrc`. ([@mdogadailo](https://github.com/mdogadailo)) - + * `react-scripts` * [#3537](https://github.com/facebookincubator/create-react-app/pull/3537) Add `mjs` and `jsx` filename extensions to `file-loader` exclude pattern. ([@iansu](https://github.com/iansu)) From dfbc71ce2ae07547a8544cce14a1a23fac99e071 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 3 Apr 2018 20:27:48 -0400 Subject: [PATCH 08/12] Publish - react-dev-utils@5.0.1 - react-scripts@1.1.4 --- packages/react-dev-utils/package.json | 2 +- packages/react-scripts/package.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 4261eeb6cd8..8adff62faa9 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -1,6 +1,6 @@ { "name": "react-dev-utils", - "version": "5.0.0", + "version": "5.0.1", "description": "Webpack utilities used by Create React App", "repository": "facebookincubator/create-react-app", "license": "MIT", diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 797e95a96a4..c33c3b4b5c4 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "react-scripts", - "version": "1.1.3", + "version": "1.1.4", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "MIT", @@ -50,7 +50,7 @@ "postcss-loader": "2.0.8", "promise": "8.0.1", "raf": "3.4.0", - "react-dev-utils": "^5.0.0", + "react-dev-utils": "^5.0.1", "resolve": "1.6.0", "style-loader": "0.19.0", "sw-precache-webpack-plugin": "0.11.4", From 805ab399e1189a69e361fa1841fe2ee8dcbfcfda Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 23 Jun 2018 13:37:23 +0100 Subject: [PATCH 09/12] Add modes to our Babel preset (1.x) (#4668) --- packages/babel-preset-react-app/create.js | 135 +++++++++++++++++++ packages/babel-preset-react-app/dev.js | 11 ++ packages/babel-preset-react-app/index.js | 125 +---------------- packages/babel-preset-react-app/package.json | 6 +- packages/babel-preset-react-app/prod.js | 11 ++ packages/babel-preset-react-app/test.js | 11 ++ 6 files changed, 175 insertions(+), 124 deletions(-) create mode 100644 packages/babel-preset-react-app/create.js create mode 100644 packages/babel-preset-react-app/dev.js create mode 100644 packages/babel-preset-react-app/prod.js create mode 100644 packages/babel-preset-react-app/test.js diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js new file mode 100644 index 00000000000..7156ff4ee8b --- /dev/null +++ b/packages/babel-preset-react-app/create.js @@ -0,0 +1,135 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +'use strict'; + +module.exports = function create(env) { + if (env !== 'development' && env !== 'test' && env !== 'production') { + throw new Error( + 'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' + + '`BABEL_ENV` environment variables. Valid values are "development", ' + + '"test", and "production". Instead, received: ' + + JSON.stringify(env) + + '.' + ); + } + + const plugins = [ + // Necessary to include regardless of the environment because + // in practice some other transforms (such as object-rest-spread) + // don't work without it: https://github.com/babel/babel/issues/7215 + require.resolve('babel-plugin-transform-es2015-destructuring'), + // class { handleClick = () => { } } + require.resolve('babel-plugin-transform-class-properties'), + // The following two plugins use Object.assign directly, instead of Babel's + // extends helper. Note that this assumes `Object.assign` is available. + // { ...todo, completed: true } + [ + require.resolve('babel-plugin-transform-object-rest-spread'), + { + useBuiltIns: true, + }, + ], + // Transforms JSX + [ + require.resolve('babel-plugin-transform-react-jsx'), + { + useBuiltIns: true, + }, + ], + // Polyfills the runtime needed for async/await and generators + [ + require.resolve('babel-plugin-transform-runtime'), + { + helpers: false, + polyfill: false, + regenerator: true, + }, + ], + ]; + + if (env === 'development' || env === 'test') { + // The following two plugins are currently necessary to make React warnings + // include more valuable information. They are included here because they are + // currently not enabled in babel-preset-react. See the below threads for more info: + // https://github.com/babel/babel/issues/4702 + // https://github.com/babel/babel/pull/3540#issuecomment-228673661 + // https://github.com/facebookincubator/create-react-app/issues/989 + plugins.push.apply(plugins, [ + // Adds component stack to warning messages + require.resolve('babel-plugin-transform-react-jsx-source'), + // Adds __self attribute to JSX which React will use for some warnings + require.resolve('babel-plugin-transform-react-jsx-self'), + ]); + } + + if (env === 'test') { + return { + presets: [ + // ES features necessary for user's Node version + [ + require('babel-preset-env').default, + { + targets: { + node: 'current', + }, + }, + ], + // JSX, Flow + require.resolve('babel-preset-react'), + ], + plugins: plugins.concat([ + // Compiles import() to a deferred require() + require.resolve('babel-plugin-dynamic-import-node'), + ]), + }; + } else { + return { + presets: [ + // Latest stable ECMAScript features + [ + require.resolve('babel-preset-env'), + { + targets: { + // React parses on ie 9, so we should too + ie: 9, + // We currently minify with uglify + // Remove after https://github.com/mishoo/UglifyJS2/issues/448 + uglify: true, + }, + // Disable polyfill transforms + useBuiltIns: false, + // Do not transform modules to CJS + modules: false, + }, + ], + // JSX, Flow + require.resolve('babel-preset-react'), + ], + plugins: plugins.concat([ + // function* () { yield 42; yield 43; } + [ + require.resolve('babel-plugin-transform-regenerator'), + { + // Async functions are converted to generators by babel-preset-env + async: false, + }, + ], + // Adds syntax support for import() + require.resolve('babel-plugin-syntax-dynamic-import'), + ]), + }; + + if (env === 'production') { + // Optimization: hoist JSX that never changes out of render() + // Disabled because of issues: https://github.com/facebookincubator/create-react-app/issues/553 + // TODO: Enable again when these issues are resolved. + // plugins.push.apply(plugins, [ + // require.resolve('babel-plugin-transform-react-constant-elements') + // ]); + } + } +}; diff --git a/packages/babel-preset-react-app/dev.js b/packages/babel-preset-react-app/dev.js new file mode 100644 index 00000000000..399cfb708c3 --- /dev/null +++ b/packages/babel-preset-react-app/dev.js @@ -0,0 +1,11 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +'use strict'; + +const create = require('./create'); + +module.exports = create('development'); diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js index d90fb6af50b..47b1c8949c1 100644 --- a/packages/babel-preset-react-app/index.js +++ b/packages/babel-preset-react-app/index.js @@ -6,39 +6,7 @@ */ 'use strict'; -const plugins = [ - // Necessary to include regardless of the environment because - // in practice some other transforms (such as object-rest-spread) - // don't work without it: https://github.com/babel/babel/issues/7215 - require.resolve('babel-plugin-transform-es2015-destructuring'), - // class { handleClick = () => { } } - require.resolve('babel-plugin-transform-class-properties'), - // The following two plugins use Object.assign directly, instead of Babel's - // extends helper. Note that this assumes `Object.assign` is available. - // { ...todo, completed: true } - [ - require.resolve('babel-plugin-transform-object-rest-spread'), - { - useBuiltIns: true, - }, - ], - // Transforms JSX - [ - require.resolve('babel-plugin-transform-react-jsx'), - { - useBuiltIns: true, - }, - ], - // Polyfills the runtime needed for async/await and generators - [ - require.resolve('babel-plugin-transform-runtime'), - { - helpers: false, - polyfill: false, - regenerator: true, - }, - ], -]; +const create = require('./create'); // This is similar to how `env` works in Babel: // https://babeljs.io/docs/usage/babelrc/#env-option @@ -47,94 +15,5 @@ const plugins = [ // https://github.com/facebookincubator/create-react-app/issues/720 // It’s also nice that we can enforce `NODE_ENV` being specified. var env = process.env.BABEL_ENV || process.env.NODE_ENV; -if (env !== 'development' && env !== 'test' && env !== 'production') { - throw new Error( - 'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' + - '`BABEL_ENV` environment variables. Valid values are "development", ' + - '"test", and "production". Instead, received: ' + - JSON.stringify(env) + - '.' - ); -} -if (env === 'development' || env === 'test') { - // The following two plugins are currently necessary to make React warnings - // include more valuable information. They are included here because they are - // currently not enabled in babel-preset-react. See the below threads for more info: - // https://github.com/babel/babel/issues/4702 - // https://github.com/babel/babel/pull/3540#issuecomment-228673661 - // https://github.com/facebookincubator/create-react-app/issues/989 - plugins.push.apply(plugins, [ - // Adds component stack to warning messages - require.resolve('babel-plugin-transform-react-jsx-source'), - // Adds __self attribute to JSX which React will use for some warnings - require.resolve('babel-plugin-transform-react-jsx-self'), - ]); -} - -if (env === 'test') { - module.exports = { - presets: [ - // ES features necessary for user's Node version - [ - require('babel-preset-env').default, - { - targets: { - node: 'current', - }, - }, - ], - // JSX, Flow - require.resolve('babel-preset-react'), - ], - plugins: plugins.concat([ - // Compiles import() to a deferred require() - require.resolve('babel-plugin-dynamic-import-node'), - ]), - }; -} else { - module.exports = { - presets: [ - // Latest stable ECMAScript features - [ - require.resolve('babel-preset-env'), - { - targets: { - // React parses on ie 9, so we should too - ie: 9, - // We currently minify with uglify - // Remove after https://github.com/mishoo/UglifyJS2/issues/448 - uglify: true, - }, - // Disable polyfill transforms - useBuiltIns: false, - // Do not transform modules to CJS - modules: false, - }, - ], - // JSX, Flow - require.resolve('babel-preset-react'), - ], - plugins: plugins.concat([ - // function* () { yield 42; yield 43; } - [ - require.resolve('babel-plugin-transform-regenerator'), - { - // Async functions are converted to generators by babel-preset-env - async: false, - }, - ], - // Adds syntax support for import() - require.resolve('babel-plugin-syntax-dynamic-import'), - ]), - }; - - if (env === 'production') { - // Optimization: hoist JSX that never changes out of render() - // Disabled because of issues: https://github.com/facebookincubator/create-react-app/issues/553 - // TODO: Enable again when these issues are resolved. - // plugins.push.apply(plugins, [ - // require.resolve('babel-plugin-transform-react-constant-elements') - // ]); - } -} +module.exports = create(env); diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index c6a7e29441d..1610dbcd6e2 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -8,7 +8,11 @@ "url": "https://github.com/facebookincubator/create-react-app/issues" }, "files": [ - "index.js" + "index.js", + "create.js", + "dev.js", + "prod.js", + "test.js" ], "dependencies": { "babel-plugin-dynamic-import-node": "1.1.0", diff --git a/packages/babel-preset-react-app/prod.js b/packages/babel-preset-react-app/prod.js new file mode 100644 index 00000000000..bf7520c45b5 --- /dev/null +++ b/packages/babel-preset-react-app/prod.js @@ -0,0 +1,11 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +'use strict'; + +const create = require('./create'); + +module.exports = create('production'); diff --git a/packages/babel-preset-react-app/test.js b/packages/babel-preset-react-app/test.js new file mode 100644 index 00000000000..3202d288810 --- /dev/null +++ b/packages/babel-preset-react-app/test.js @@ -0,0 +1,11 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +'use strict'; + +const create = require('./create'); + +module.exports = create('test'); From 8de0412c54bee1bc4d783aa260dd6e9248316e0f Mon Sep 17 00:00:00 2001 From: Dan Date: Sat, 23 Jun 2018 13:38:59 +0100 Subject: [PATCH 10/12] babel-preset-react-app@3.1.2 --- packages/babel-preset-react-app/package.json | 2 +- packages/react-scripts/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index 1610dbcd6e2..81dd0fa1fe9 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -1,6 +1,6 @@ { "name": "babel-preset-react-app", - "version": "3.1.1", + "version": "3.1.2", "description": "Babel preset used by Create React App", "repository": "facebookincubator/create-react-app", "license": "MIT", diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index c33c3b4b5c4..1886de22830 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -26,7 +26,7 @@ "babel-eslint": "7.2.3", "babel-jest": "20.0.3", "babel-loader": "7.1.2", - "babel-preset-react-app": "^3.1.1", + "babel-preset-react-app": "^3.1.2", "babel-runtime": "6.26.0", "case-sensitive-paths-webpack-plugin": "2.1.1", "chalk": "1.1.3", From ea7b37414aa887dfe7722bbc1c85b3291083053a Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Tue, 26 Jun 2018 10:45:00 -0600 Subject: [PATCH 11/12] add react-testing-library documentation/examples (#4679) * add react-testing-library documentation/examples * make react-testing-library a heading * fix typo --- packages/react-scripts/template/README.md | 42 +++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 479d632a5f0..388b73d8d36 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1428,6 +1428,48 @@ Import it in [`src/setupTests.js`](#initializing-test-environment) to make its m import 'jest-enzyme'; ``` +#### Use `react-testing-library` + +As an alternative or companion to `enzyme`, you may consider using `react-testing-library`. [`react-testing-library`](https://github.com/kentcdodds/react-testing-library) is a library for testing React components in a way that resembles the way the components are used by end users. It is well suited for unit, integration, and end-to-end testing of React components and applications. It works more directly with DOM nodes, and therefore it's recommended to use with [`jest-dom`](https://github.com/gnapse/jest-dom) for improved assertions. + +To install `react-testing-library` and `jest-dom`, you can run: + +```sh +npm install --save react-testing-library jest-dom +``` + +Alternatively you may use `yarn`: + +```sh +yarn add react-testing-library jest-dom +``` + +Similar to `enzyme` you can create a `src/setupTests.js` file to avoid boilerplate in your test files: + +```js +// react-testing-library renders your components to document.body, +// this will ensure they're removed after each test. +import 'react-testing-library/cleanup-after-each'; + +// this adds jest-dom's custom assertions +import 'jest-dom/extend-expect'; +``` + +Here's an example of using `react-testing-library` and `jest-dom` for testing that the `` component renders "Welcome to React". + +```js +import React from 'react'; +import { render } from 'react-testing-library'; +import App from './App'; + +it('renders welcome message', () => { + const { getByText } = render(); + expect(getByText('Welcome to React')).toBeInTheDOM(); +}); +``` + +Learn more about the utilities provided by `react-testing-library` to facilitate testing asynchronous interactions as well as selecting form elements from [the `react-testing-library` documentation](https://github.com/kentcdodds/react-testing-library) and [examples](https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples). + ### Using Third Party Assertion Libraries We recommend that you use `expect()` for assertions and `jest.fn()` for spies. If you are having issues with them please [file those against Jest](https://github.com/facebook/jest/issues/new), and we’ll fix them. We intend to keep making them better for React, supporting, for example, [pretty-printing React elements as JSX](https://github.com/facebook/jest/pull/1566). From ca5998326deebf79845ca00f616b8dad11d90509 Mon Sep 17 00:00:00 2001 From: Terbiy Date: Tue, 7 Aug 2018 17:57:03 +0300 Subject: [PATCH 12/12] Fix link to the article about BEM (#4858) --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 388b73d8d36..5bbfc5f676f 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -506,7 +506,7 @@ class Button extends Component { } ``` -**This is not required for React** but many people find this feature convenient. You can read about the benefits of this approach [here](https://medium.com/seek-ui-engineering/block-element-modifying-your-javascript-components-d7f99fcab52b). However you should be aware that this makes your code less portable to other build tools and environments than Webpack. +**This is not required for React** but many people find this feature convenient. You can read about the benefits of this approach [here](https://medium.com/seek-blog/block-element-modifying-your-javascript-components-d7f99fcab52b). However you should be aware that this makes your code less portable to other build tools and environments than Webpack. In development, expressing dependencies this way allows your styles to be reloaded on the fly as you edit them. In production, all CSS files will be concatenated into a single minified `.css` file in the build output.