-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(examples): Add context examples (#68)
* feat(examples): Add context examples * modify the examples * fix example stuff
- Loading branch information
1 parent
46c3a7e
commit c61de92
Showing
15 changed files
with
163 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'), | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| ], | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
2 changes: 1 addition & 1 deletion
2
src/__tests__/mock.react-transition-group.js → .../__tests__/mock.react-transition-group.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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') | ||
| }) |
2 changes: 1 addition & 1 deletion
2
src/__tests__/react-redux.js → examples/__tests__/react-redux.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
...tests__/shallow.react-transition-group.js → ...tests__/shallow.react-transition-group.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 5 additions & 1 deletion
6
src/__tests__/number-display.js → examples/__tests__/update-props.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'), | ||
| }, | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| const jestConfig = require('kcd-scripts/jest') | ||
|
|
||
| module.exports = Object.assign(jestConfig, { | ||
| displayName: 'library', | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| module.exports = { | ||
| coverageDirectory: '../coverage', | ||
| collectCoverageFrom: [ | ||
| '**/src/**/*.js', | ||
| '!**/__tests__/**', | ||
| '!**/node_modules/**', | ||
| ], | ||
| projects: ['./', './examples'], | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.