feat(examples): Add context examples (#68)

* feat(examples): Add context examples

* modify the examples

* fix example stuff

Author: alexkrolick

README.md

@@ -456,12 +456,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:
 
@@ -546,7 +546,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>
@@ -589,7 +589,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
@@ -598,7 +598,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)
@@ -759,13 +759,11 @@ 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") | [<img src="https://avatars3.githubusercontent.com/u/1571667?v=4" width="100px;"/><br /><sub><b>Alex Krolick</b></sub>](https://alexkrolick.com)<br />[💬](#question-alexkrolick "Answering Questions") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=alexkrolick "Documentation") [💡](#example-alexkrolick "Examples") [🤔](#ideas-alexkrolick "Ideas, Planning, & Feedback") |
-
 <!-- 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,30 @@
+# 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'`).
+
+## 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

@@ -0,0 +1,56 @@
+import React from 'react'
+import {render} from 'react-testing-library'
+import 'jest-dom/extend-expect'
+import {NameContext, NameProvider, NameConsumer} from '../react-context'
+
+/**
+ * Test default values by rendering a context consumer without a
+ * matching provider
+ */
+test('NameConsumer shows default value', () => {
+  const {getByText} = render(<NameConsumer />)
+  expect(getByText('My Name Is:')).toHaveTextContent('My Name Is: Unknown')
+})
+
+/**
+ * To test a component tree that uses a context consumer but not the provider,
+ * wrap the tree with a matching provider
+ */
+test('NameConsumer shows value from provider', () => {
+  const tree = (
+    <NameContext.Provider value="C3P0">
+      <NameConsumer />
+    </NameContext.Provider>
+  )
+  const {getByText} = render(tree)
+  expect(getByText('My Name Is:')).toHaveTextContent('My Name Is: C3P0')
+})
+
+/**
+ * To test a component that provides a context value, render a matching
+ * consumer as the child
+ */
+test('NameProvider composes full name from first, last', () => {
+  const tree = (
+    <NameProvider first="Boba" last="Fett">
+      <NameContext.Consumer>
+        {value => <span>Received: {value}</span>}
+      </NameContext.Consumer>
+    </NameProvider>
+  )
+  const {getByText} = render(tree)
+  expect(getByText('Received:').textContent).toBe('Received: Boba Fett')
+})
+
+/**
+ * A tree containing both a providers and consumer can be rendered normally
+ */
+test('NameProvider/Consumer shows name of character', () => {
+  const tree = (
+    <NameProvider first="Leia" last="Organa">
+      <NameConsumer />
+    </NameProvider>
+  )
+  const {getByText} = render(tree)
+  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

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

examples/react-context.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const NameContext = React.createContext('Unknown')
+
+const NameProvider = ({children, first, last}) => {
+  const fullName = `${first} ${last}`
+  return (
+    <NameContext.Provider value={fullName}>{children}</NameContext.Provider>
+  )
+}
+
+const NameConsumer = () => (
+  <NameContext.Consumer>
+    {value => <div>My Name Is: {value}</div>}
+  </NameContext.Consumer>
+)
+
+export {NameContext, NameConsumer, NameProvider}

jest.config.js

@@ -0,0 +1,5 @@
+const jestConfig = require('kcd-scripts/jest')
+
+module.exports = Object.assign(jestConfig, {
+  displayName: 'library',
+})

other/jest.config.js

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

package.json

@@ -11,7 +11,7 @@
     "add-contributor": "kcd-scripts contributors add",
     "build": "kcd-scripts build",
     "lint": "kcd-scripts lint",
-    "test": "kcd-scripts test",
+    "test": "kcd-scripts test --config=other/jest.config.js",
     "test:update": "npm test -- --updateSnapshot --coverage",
     "validate": "kcd-scripts validate",
     "setup": "npm install && npm run validate -s",
@@ -42,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",