From 000e645fab2c37c04aea4094eb235794973cb763 Mon Sep 17 00:00:00 2001 From: cpojer Date: Fri, 5 Aug 2016 14:04:00 +0900 Subject: [PATCH] Add simple test instructions. --- README.md | 3 +-- template/README.md | 23 +++++++++++++++-------- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index aac5d0b0f18..5d7949d5b2d 100644 --- a/README.md +++ b/README.md @@ -105,7 +105,7 @@ You can also read its latest version [here](https://github.com/facebookincubator * Autoprefixed CSS, so you don’t need `-webkit` or other prefixes. * A `build` script to bundle JS, CSS, and images for production, with sourcemaps. -**The feature set is intentionally limited**. It doesn’t support advanced features such as server rendering or CSS modules. Currently, it doesn’t support testing either. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. +**The feature set is intentionally limited**. It doesn’t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. **You don’t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. We’ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. @@ -124,7 +124,6 @@ You don’t have to ever use `eject`. The curated feature set is suitable for sm Some features are currently **not supported**: * Server rendering. -* Testing. * Some experimental syntax extensions (e.g. decorators). * CSS Modules. * LESS or Sass. diff --git a/template/README.md b/template/README.md index 441953eef69..aefb03712df 100644 --- a/template/README.md +++ b/template/README.md @@ -1,4 +1,4 @@ -Below you will find some information on how to perform common tasks. +Below you will find some information on how to perform common tasks. You can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/template/README.md). ## Table of Contents @@ -9,6 +9,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Available Scripts](#available-scripts) - [npm start](#npm-start) - [npm run build](#npm-run-build) + - [npm run test](#npm-run-test) - [npm run eject](#npm-run-eject) - [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor) - [Installing a Dependency](#installing-a-dependency) @@ -75,10 +76,10 @@ For the project to build, **these files must exist with exact filenames**: You can delete or rename the other files. -You may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by Webpack. +You may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by Webpack. You need to **put any JS and CSS files inside `src`**, or Webpack won’t see them. -You can, however, create more top-level directories. +You can, however, create more top-level directories. They will not be included in the production build so you can use them for things like documentation. ## Available Scripts @@ -101,6 +102,12 @@ It correctly bundles React in production mode and optimizes the build for the be The build is minified and the filenames include the hashes.
Your app is ready to be deployed! +### `npm run test` + +Runs the tests using [Jest](http://facebook.github.io/jest/). + +An example React snapshot test is provided and snapshot tests are the recommended way of testing. To learn more, read the snapshot testing [tutorial](http://facebook.github.io/jest/docs/tutorial-react.html#snapshot-testing). + ### `npm run eject` **Note: this is a one-way operation. Once you `eject`, you can’t go back!** @@ -138,7 +145,7 @@ Then make sure `package.json` of your project ends with this block: } ``` -Projects generated with `react-scripts@0.2.0` and higher should already have it. +Projects generated with `react-scripts@0.2.0` and higher should already have it. If you don’t need ESLint integration with your editor, you can safely delete those three lines from your `package.json`. Finally, you will need to install some packages *globally*: @@ -159,7 +166,7 @@ npm install --save ## Importing a Component -This project setup supports ES6 modules thanks to Babel. +This project setup supports ES6 modules thanks to Babel. While you can still use `require()` and `module.exports`, we encourage you to use [`import` and `export`](http://exploringjs.com/es6/ch_modules.html) instead. For example: @@ -467,7 +474,7 @@ Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-r >Note: this feature is available with `react-scripts@0.3.0` and higher. -People often serve the front-end React app from the same host and port as their backend implementation. +People often serve the front-end React app from the same host and port as their backend implementation. For example, a production setup might look like this after the app is deployed: ``` @@ -494,7 +501,7 @@ Fetch API cannot load http://localhost:400/api/todos. No 'Access-Control-Allow-O Keep in mind that `proxy` only has effect in development (with `npm start`), and it is up to you to ensure that URLs like `/api/todos` point to the right thing in production. You don’t have to use the `/api` prefix. Any unrecognized request will be redirected to the specified `proxy`. -Currently the `proxy` option only handles HTTP requests, and it won’t proxy WebSocket connections. +Currently the `proxy` option only handles HTTP requests, and it won’t proxy WebSocket connections. If the `proxy` option is **not** flexible enough for you, alternatively you can: * Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)). @@ -502,7 +509,7 @@ If the `proxy` option is **not** flexible enough for you, alternatively you can: ## Deployment -By default, Create React App produces a build assuming your app is hosted at the server root. +By default, Create React App produces a build assuming your app is hosted at the server root. To override this, specify the `homepage` in your `package.json`, for example: ```js