modify the examples

Author: Kent C. Dodds

README.md

@@ -451,12 +451,12 @@ expect(submitButton).toBeNull() // it doesn't exist
 ## Examples
 
 You'll find examples of testing with different libraries in
-[the test directory](https://github.com/kentcdodds/react-testing-library/blob/master/src/__tests__).
+[the `examples` directory](https://github.com/kentcdodds/react-testing-library/blob/master/examples).
 Some included are:
 
-* [`react-redux`](https://github.com/kentcdodds/react-testing-library/blob/master/src/__tests__/react-redux.js)
-* [`react-router`](https://github.com/kentcdodds/react-testing-library/blob/master/src/__tests__/react-router.js)
-* [`react-context`](https://github.com/kentcdodds/react-testing-library/blob/master/src/__tests__/react-context.js)
+* [`react-redux`](https://github.com/kentcdodds/react-testing-library/blob/master/examples/__tests__/react-redux.js)
+* [`react-router`](https://github.com/kentcdodds/react-testing-library/blob/master/examples/__tests__/react-router.js)
+* [`react-context`](https://github.com/kentcdodds/react-testing-library/blob/master/examples/__tests__/react-context.js)
 
 Examples of TDD with react-testing-library:
 
@@ -541,7 +541,7 @@ render(<NumberDisplay number={2} />, {container})
 expect(getByTestId('number-display').textContent).toBe('2')
 ```
 
-[Open the tests](https://github.com/kentcdodds/react-testing-library/blob/master/src/__tests__/number-display.js)
+[Open the tests](https://github.com/kentcdodds/react-testing-library/blob/master/examples/__tests__/update-props.js)
 for a full example of this.
 
 </details>
@@ -584,7 +584,7 @@ test('you can mock things with jest.mock', () => {
 Note that because they're Jest mock functions (`jest.fn()`), you could also make
 assertions on those as well if you wanted.
 
-[Open full test](https://github.com/kentcdodds/react-testing-library/blob/master/src/__tests__/mock.react-transition-group.js)
+[Open full test](https://github.com/kentcdodds/react-testing-library/blob/master/examples/__tests__/mock.react-transition-group.js)
 for the full example.
 
 This looks like more work that shallow rendering (and it is), but it gives you
@@ -593,7 +593,7 @@ enough.
 
 If you want to make things more like shallow rendering, then you could do
 something more
-[like this](https://github.com/kentcdodds/react-testing-library/blob/master/src/__tests__/shallow.react-transition-group.js).
+[like this](https://github.com/kentcdodds/react-testing-library/blob/master/examples/__tests__/shallow.react-transition-group.js).
 
 Learn more about how Jest mocks work from my blog post:
 ["But really, what is a JavaScript mock?"](https://blog.kentcdodds.com/but-really-what-is-a-javascript-mock-10d060966f7d)
@@ -754,11 +754,13 @@ light-weight, simple, and understandable.
 Thanks goes to these people ([emoji key][emojis]):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+
 <!-- prettier-ignore -->
 | [<img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;"/><br /><sub><b>Kent C. Dodds</b></sub>](https://kentcdodds.com)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Documentation") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Tests") | [<img src="https://avatars1.githubusercontent.com/u/2430381?v=4" width="100px;"/><br /><sub><b>Ryan Castner</b></sub>](http://audiolion.github.io)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=audiolion "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/8008023?v=4" width="100px;"/><br /><sub><b>Daniel Sandiego</b></sub>](https://www.dnlsandiego.com)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=dnlsandiego "Code") | [<img src="https://avatars2.githubusercontent.com/u/12592677?v=4" width="100px;"/><br /><sub><b>Paweł Mikołajczyk</b></sub>](https://github.com/Miklet)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=Miklet "Code") | [<img src="https://avatars3.githubusercontent.com/u/464978?v=4" width="100px;"/><br /><sub><b>Alejandro Ñáñez Ortiz</b></sub>](http://co.linkedin.com/in/alejandronanez/)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=alejandronanez "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1402095?v=4" width="100px;"/><br /><sub><b>Matt Parrish</b></sub>](https://github.com/pbomb)<br />[🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Apbomb "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Documentation") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Tests") | [<img src="https://avatars1.githubusercontent.com/u/1288694?v=4" width="100px;"/><br /><sub><b>Justin Hall</b></sub>](https://github.com/wKovacs64)<br />[📦](#platform-wKovacs64 "Packaging/porting to new platform") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<img src="https://avatars1.githubusercontent.com/u/1241511?s=460&v=4" width="100px;"/><br /><sub><b>Anto Aravinth</b></sub>](https://github.com/antoaravinth)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Code") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Tests") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=antoaravinth "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/3462296?v=4" width="100px;"/><br /><sub><b>Jonah Moses</b></sub>](https://github.com/JonahMoses)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=JonahMoses "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/4002543?v=4" width="100px;"/><br /><sub><b>Łukasz Gandecki</b></sub>](http://team.thebrain.pro)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Code") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Tests") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=lgandecki "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/498274?v=4" width="100px;"/><br /><sub><b>Ivan Babak</b></sub>](https://sompylasar.github.io)<br />[🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Asompylasar "Bug reports") [🤔](#ideas-sompylasar "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/4439618?v=4" width="100px;"/><br /><sub><b>Jesse Day</b></sub>](https://github.com/jday3)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=jday3 "Code") | [<img src="https://avatars0.githubusercontent.com/u/15199?v=4" width="100px;"/><br /><sub><b>Ernesto García</b></sub>](http://gnapse.github.io)<br />[💬](#question-gnapse "Answering Questions") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=gnapse "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=gnapse "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/2747424?v=4" width="100px;"/><br /><sub><b>Josef Maxx Blake</b></sub>](http://jomaxx.com)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=jomaxx "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=jomaxx "Documentation") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=jomaxx "Tests") |
 | [<img src="https://avatars1.githubusercontent.com/u/29602306?v=4" width="100px;"/><br /><sub><b>Michal Baranowski</b></sub>](https://twitter.com/baranovskim)<br />[📝](#blog-mbaranovski "Blogposts") [✅](#tutorial-mbaranovski "Tutorials") | [<img src="https://avatars3.githubusercontent.com/u/13985684?v=4" width="100px;"/><br /><sub><b>Arthur Puthin</b></sub>](https://github.com/aputhin)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=aputhin "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/21194045?v=4" width="100px;"/><br /><sub><b>Thomas Chia</b></sub>](https://github.com/thchia)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=thchia "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=thchia "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/20430611?v=4" width="100px;"/><br /><sub><b>Thiago Galvani</b></sub>](http://ilegra.com/)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=thiagopaiva99 "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/19828824?v=4" width="100px;"/><br /><sub><b>Christian</b></sub>](http://Chriswcs.github.io)<br />[⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=ChrisWcs "Tests") |
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

examples/.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  // we have to do this so our tests can reference 'react-testing-library'
+  overrides: [
+    {
+      files: ['**/__tests__/**'],
+      settings: {
+        'import/resolver': {
+          jest: {
+            jestConfigFile: require.resolve('./jest.config.js'),
+          },
+        },
+      },
+    },
+  ],
+}

examples/README.md

@@ -0,0 +1,35 @@
+# Examples
+
+Here we have some examples for you to know how to not only use
+`react-testing-library` but also in general how to test common scenarios that
+pop up with React. Check out the `__tests__` directory for the different
+examples.
+
+## Setup
+
+The examples have a unique jest/eslint set up so the test files will resemble
+how they might appear in your project. (You'll see in the tests that we can
+`import {render} from 'react-testing-library'`).
+
+Another thing that we do for the tests is we have a `setup-test-env.js` file in
+the `other` directory of this repo which includes
+`import 'jest-dom/extend-expect'` which gives us a few handy assertions. It's
+recommended to use [`jest-dom`][jest-dom] with `react-testing-library`.
+
+## Contribute
+
+We're always happy to accept contributions to the examples. Can't have too many
+of these as there are TONs of different ways to test React. Examples of testing
+components that use different and common libraries is always welcome. Try to
+keep examples simple enough for people to understand the main thing we're trying
+to demonstrate from the example.
+
+Please follow the guidelines found in [CONTRIBUTING.md][contributing] to set up
+the project.
+
+To run the tests, you can run `npm test examples`, or if you're working on a
+specific example, you can run `npm test name-of-your-file`. This will put you
+into Jest's interactive watch mode with a filter based on the name you provided.
+
+[contributing]: https://github.com/kentcdodds/react-testing-library/blob/master/CONTRIBUTING.md
+[jest-dom]: https://github.com/gnapse/jest-dom

src/__tests__/mock.react-transition-group.js renamed to examples/__tests__/mock.react-transition-group.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import {CSSTransition} from 'react-transition-group'
-import {render, Simulate} from '../'
+import {render, Simulate} from 'react-testing-library'
 
 function Fade({children, ...props}) {
   return (

examples/__tests__/react-context.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {render} from '../../src'
+import {render} from 'react-testing-library'
 import {NameContext, NameProvider, NameConsumer} from '../react-context'
 
 /**
@@ -8,7 +8,7 @@ import {NameContext, NameProvider, NameConsumer} from '../react-context'
  */
 test('NameConsumer shows default value', () => {
   const {getByText} = render(<NameConsumer />)
-  expect(getByText('My Name Is:').textContent).toBe('My Name Is: Unknown')
+  expect(getByText('My Name Is:')).toHaveTextContent('My Name Is: Unknown')
 })
 
 /**
@@ -17,12 +17,12 @@ test('NameConsumer shows default value', () => {
  */
 test('NameConsumer shows value from provider', () => {
   const tree = (
-    <NameContext.Provider value={'C3P0'}>
+    <NameContext.Provider value="C3P0">
       <NameConsumer />
     </NameContext.Provider>
   )
   const {getByText} = render(tree)
-  expect(getByText('My Name Is:').textContent).toBe('My Name Is: C3P0')
+  expect(getByText('My Name Is:')).toHaveTextContent('My Name Is: C3P0')
 })
 
 /**
@@ -38,7 +38,7 @@ test('NameProvider composes full name from first, last', () => {
     </NameProvider>
   )
   const {getByText} = render(tree)
-  expect(getByText('Received: ').textContent).toBe('Received: Boba Fett')
+  expect(getByText('Received:').textContent).toBe('Received: Boba Fett')
 })
 
 /**
@@ -51,5 +51,5 @@ test('NameProvider/Consumer shows name of character', () => {
     </NameProvider>
   )
   const {getByText} = render(tree)
-  expect(getByText('My Name Is: ').textContent).toBe('My Name Is: Leia Organa')
+  expect(getByText('My Name Is:').textContent).toBe('My Name Is: Leia Organa')
 })

src/__tests__/react-redux.js renamed to examples/__tests__/react-redux.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import {createStore} from 'redux'
 import {Provider, connect} from 'react-redux'
-import {render, Simulate} from '../'
+import {render, Simulate} from 'react-testing-library'
 
 // counter.js
 class Counter extends React.Component {

src/__tests__/react-router.js renamed to examples/__tests__/react-router.js

@@ -2,7 +2,7 @@ import React from 'react'
 import {withRouter} from 'react-router'
 import {Link, Route, Router, Switch} from 'react-router-dom'
 import {createMemoryHistory} from 'history'
-import {render, Simulate} from '../'
+import {render, Simulate} from 'react-testing-library'
 
 const About = () => <div>You are on the about page</div>
 const Home = () => <div>You are home</div>

src/__tests__/shallow.react-transition-group.js renamed to examples/__tests__/shallow.react-transition-group.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import {CSSTransition} from 'react-transition-group'
-import {render, Simulate} from '../'
+import {render, Simulate} from 'react-testing-library'
 
 function Fade({children, ...props}) {
   return (

src/__tests__/number-display.js renamed to examples/__tests__/update-props.js

@@ -1,5 +1,9 @@
+// This is an example of how to update the props of a rendered component.
+// the basic idea is to simply call `render` again and provide the same container
+// that your first call created for you.
+
 import React from 'react'
-import {render} from '../'
+import {render} from 'react-testing-library'
 
 let idCounter = 1
 

examples/jest.config.js

@@ -1,6 +1,11 @@
 const jestConfig = require('kcd-scripts/jest')
 
 module.exports = Object.assign(jestConfig, {
-  testEnvironment: 'jest-environment-jsdom',
-  roots: ['./'],
+  rootDir: __dirname,
+  displayName: 'example',
+  setupTestFrameworkScriptFile: require.resolve('../other/setup-test-env'),
+  moduleNameMapper: {
+    // this is just here so our examples look like they would in a real project
+    'react-testing-library': require.resolve('../src'),
+  },
 })

jest.config.js

@@ -1,6 +1,6 @@
 const jestConfig = require('kcd-scripts/jest')
 
 module.exports = Object.assign(jestConfig, {
-  testEnvironment: 'jest-environment-jsdom',
-  projects: ['./examples', './src'],
+  displayName: 'library',
+  setupTestFrameworkScriptFile: require.resolve('./other/setup-test-env'),
 })

other/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  coverageDirectory: '../coverage',
+  collectCoverageFrom: [
+    '**/src/**/*.js',
+    '!**/__tests__/**',
+    '!**/node_modules/**',
+  ],
+  projects: ['./', './examples'],
+}

other/setup-test-env.js

@@ -0,0 +1 @@
+import 'jest-dom/extend-expect'

package.json

@@ -11,9 +11,8 @@
     "add-contributor": "kcd-scripts contributors add",
     "build": "kcd-scripts build",
     "lint": "kcd-scripts lint",
-    "test": "kcd-scripts test --projects=src",
+    "test": "kcd-scripts test --config=other/jest.config.js",
     "test:update": "npm test -- --updateSnapshot --coverage --projects=src",
-    "test:examples": "kcd-scripts test --projects=examples",
     "validate": "kcd-scripts validate",
     "setup": "npm install && npm run validate -s",
     "precommit": "kcd-scripts precommit"
@@ -43,7 +42,9 @@
   "devDependencies": {
     "@types/react-dom": "^16.0.5",
     "axios": "^0.18.0",
+    "eslint-import-resolver-jest": "^2.1.1",
     "history": "^4.7.2",
+    "jest-dom": "^1.0.0",
     "jest-in-case": "^1.0.2",
     "kcd-scripts": "^0.37.0",
     "react": "^16.3.2",