diff --git a/README.md b/README.md index 660b3dab..9be76865 100644 --- a/README.md +++ b/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(, {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. @@ -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]): - | [
Kent C. Dodds](https://kentcdodds.com)
[πŸ’»](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") | [
Ryan Castner](http://audiolion.github.io)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=audiolion "Documentation") | [
Daniel Sandiego](https://www.dnlsandiego.com)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=dnlsandiego "Code") | [
PaweΕ‚ MikoΕ‚ajczyk](https://github.com/Miklet)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=Miklet "Code") | [
Alejandro ÑÑñez Ortiz](http://co.linkedin.com/in/alejandronanez/)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=alejandronanez "Documentation") | [
Matt Parrish](https://github.com/pbomb)
[πŸ›](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") | [
Justin Hall](https://github.com/wKovacs64)
[πŸ“¦](#platform-wKovacs64 "Packaging/porting to new platform") | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | | [
Anto Aravinth](https://github.com/antoaravinth)
[πŸ’»](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") | [
Jonah Moses](https://github.com/JonahMoses)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=JonahMoses "Documentation") | [
Łukasz Gandecki](http://team.thebrain.pro)
[πŸ’»](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") | [
Ivan Babak](https://sompylasar.github.io)
[πŸ›](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Asompylasar "Bug reports") [πŸ€”](#ideas-sompylasar "Ideas, Planning, & Feedback") | [
Jesse Day](https://github.com/jday3)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=jday3 "Code") | [
Ernesto GarcΓ­a](http://gnapse.github.io)
[πŸ’¬](#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") | [
Josef Maxx Blake](http://jomaxx.com)
[πŸ’»](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") | | [
Michal Baranowski](https://twitter.com/baranovskim)
[πŸ“](#blog-mbaranovski "Blogposts") [βœ…](#tutorial-mbaranovski "Tutorials") | [
Arthur Puthin](https://github.com/aputhin)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=aputhin "Documentation") | [
Thomas Chia](https://github.com/thchia)
[πŸ’»](https://github.com/kentcdodds/react-testing-library/commits?author=thchia "Code") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=thchia "Documentation") | [
Thiago Galvani](http://ilegra.com/)
[πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=thiagopaiva99 "Documentation") | [
Christian](http://Chriswcs.github.io)
[⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=ChrisWcs "Tests") | [
Alex Krolick](https://alexkrolick.com)
[πŸ’¬](#question-alexkrolick "Answering Questions") [πŸ“–](https://github.com/kentcdodds/react-testing-library/commits?author=alexkrolick "Documentation") [πŸ’‘](#example-alexkrolick "Examples") [πŸ€”](#ideas-alexkrolick "Ideas, Planning, & Feedback") | - This project follows the [all-contributors][all-contributors] specification. diff --git a/examples/.eslintrc.js b/examples/.eslintrc.js new file mode 100644 index 00000000..67ff778c --- /dev/null +++ b/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'), + }, + }, + }, + }, + ], +} diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 00000000..6eda8302 --- /dev/null +++ b/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 diff --git a/src/__tests__/mock.react-transition-group.js b/examples/__tests__/mock.react-transition-group.js similarity index 96% rename from src/__tests__/mock.react-transition-group.js rename to examples/__tests__/mock.react-transition-group.js index 67a8b790..f2547195 100644 --- a/src/__tests__/mock.react-transition-group.js +++ b/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 ( diff --git a/examples/__tests__/react-context.js b/examples/__tests__/react-context.js new file mode 100644 index 00000000..00d47b58 --- /dev/null +++ b/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() + 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 = ( + + + + ) + 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 = ( + + + {value => Received: {value}} + + + ) + 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 = ( + + + + ) + const {getByText} = render(tree) + expect(getByText('My Name Is:').textContent).toBe('My Name Is: Leia Organa') +}) diff --git a/src/__tests__/react-redux.js b/examples/__tests__/react-redux.js similarity index 98% rename from src/__tests__/react-redux.js rename to examples/__tests__/react-redux.js index 6162753e..f5ee1764 100644 --- a/src/__tests__/react-redux.js +++ b/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 { diff --git a/src/__tests__/react-router.js b/examples/__tests__/react-router.js similarity index 97% rename from src/__tests__/react-router.js rename to examples/__tests__/react-router.js index d0d6c934..2021771f 100644 --- a/src/__tests__/react-router.js +++ b/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 = () =>
You are on the about page
const Home = () =>
You are home
diff --git a/src/__tests__/shallow.react-transition-group.js b/examples/__tests__/shallow.react-transition-group.js similarity index 95% rename from src/__tests__/shallow.react-transition-group.js rename to examples/__tests__/shallow.react-transition-group.js index cb3e329e..b922a30b 100644 --- a/src/__tests__/shallow.react-transition-group.js +++ b/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 ( diff --git a/src/__tests__/number-display.js b/examples/__tests__/update-props.js similarity index 79% rename from src/__tests__/number-display.js rename to examples/__tests__/update-props.js index 60a9ea32..2f8952e7 100644 --- a/src/__tests__/number-display.js +++ b/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 diff --git a/examples/jest.config.js b/examples/jest.config.js new file mode 100644 index 00000000..8dc4330d --- /dev/null +++ b/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'), + }, +}) diff --git a/examples/react-context.js b/examples/react-context.js new file mode 100644 index 00000000..4ec24f6c --- /dev/null +++ b/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 ( + {children} + ) +} + +const NameConsumer = () => ( + + {value =>
My Name Is: {value}
} + +) + +export {NameContext, NameConsumer, NameProvider} diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 00000000..23133e67 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,5 @@ +const jestConfig = require('kcd-scripts/jest') + +module.exports = Object.assign(jestConfig, { + displayName: 'library', +}) diff --git a/other/jest.config.js b/other/jest.config.js new file mode 100644 index 00000000..3efec572 --- /dev/null +++ b/other/jest.config.js @@ -0,0 +1,9 @@ +module.exports = { + coverageDirectory: '../coverage', + collectCoverageFrom: [ + '**/src/**/*.js', + '!**/__tests__/**', + '!**/node_modules/**', + ], + projects: ['./', './examples'], +} diff --git a/package.json b/package.json index 1663f134..0a4abb76 100644 --- a/package.json +++ b/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", diff --git a/src/__tests__/react-context.js b/src/__tests__/react-context.js deleted file mode 100644 index 4d10eb0b..00000000 --- a/src/__tests__/react-context.js +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react' -import {render, Simulate} from '../' - -const StateContext = React.createContext() - -const MyButton = () => ( - - {({handleToggle}) => } - -) - -const SecretMessage = () => ( - - {({toggleStatus}) =>

{toggleStatus ? 'Secret Message' : 'Hidden'}

} - -) - -class Container extends React.Component { - handleToggle = () => { - this.setState(prevState => ({ - toggleStatus: !prevState.toggleStatus, - })) - } - - state = { - toggleStatus: false, - handleToggle: this.handleToggle, - } - - render() { - return ( -
- - - - -
- ) - } -} - -test('Component renders with the correct message then correctly changes message after clicking button', () => { - const {getByText} = render() - expect(getByText('Hidden').textContent).toBe('Hidden') - Simulate.click(getByText('Push Me')) - expect(getByText('Secret Message').textContent).toBe('Secret Message') -})