From 12e8ceae9d5b07af952db3032b4cf590d2c5e212 Mon Sep 17 00:00:00 2001 From: Blaine Kasten Date: Sat, 11 Feb 2017 17:05:54 -0600 Subject: [PATCH 01/73] Suggest jest-enzyme for simplifying test matchers (#994) * Suggest jest-enzyme for simplifying test matchers * Update README.md * Update README.md --- packages/react-scripts/template/README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index c49da3e8d34..c30fb9d13ee 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -867,6 +867,20 @@ it('renders welcome message', () => { All Jest matchers are [extensively documented here](http://facebook.github.io/jest/docs/api.html#expect-value).
Nevertheless you can use a third-party assertion library like [Chai](http://chaijs.com/) if you want to, as described below. +Additionally, you might find [jest-enzyme](https://github.com/blainekasten/enzyme-matchers) helpful to simplify your tests with readable matchers. The above `contains` code can be written simpler with jest-enzyme. + +```js +expect(wrapper).toContainReact(welcome) +``` + +To setup jest-enzyme with Create React App, follow the instructions for [initializing your test environment](#initializing-test-environment) to import `jest-enzyme`. + +```js +// src/setupTests.js +import 'jest-enzyme'; +``` + + ### 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 645ba66d41a9c537f5514994893daacdbfbafb23 Mon Sep 17 00:00:00 2001 From: Dimitris Tsironis Date: Sun, 12 Feb 2017 02:38:59 +0200 Subject: [PATCH 02/73] Add SASS support documentation #1007 (#1008) * Add SASS support documentation #1007 * Change SASS section title to more generic label * Fix link in Table of Contents * Chain build-css with watch-css script, fix typos * Update Sass and Less naming style * Fix wording, remove offensive words * Slightly rewite --- packages/react-scripts/template/README.md | 47 +++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index c30fb9d13ee..00e4f248131 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -20,6 +20,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Importing a Component](#importing-a-component) - [Adding a Stylesheet](#adding-a-stylesheet) - [Post-Processing CSS](#post-processing-css) +- [Adding a CSS Preprocessor (Sass, Less etc.)](#adding-a-css-preprocessor-sass-less-etc) - [Adding Images and Fonts](#adding-images-and-fonts) - [Using the `public` Folder](#using-the-public-folder) - [Changing the HTML](#changing-the-html) @@ -353,6 +354,52 @@ becomes this: There is currently no support for preprocessors such as Less, or for sharing variables across CSS files. +## Adding a CSS Preprocessor (Sass, Less etc.) + +Generally, we recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a `.Button` CSS class in `` and `` components, we recommend creating a `