diff --git a/CHANGELOG.md b/CHANGELOG.md
index b79db6b8786..fed2c53f957 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,85 @@
+## 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
+
+* `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
+
+* `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
@@ -49,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))
@@ -75,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))
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..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",
@@ -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');
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index 18f37c971e4..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",
@@ -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",
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 94d8e98df6d..1886de22830 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.4",
"description": "Configuration and scripts for Create React App.",
"repository": "facebookincubator/create-react-app",
"license": "MIT",
@@ -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",
@@ -50,7 +50,8 @@
"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",
"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);
diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index 479d632a5f0..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.
@@ -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).