From 8a8d113b8afdb086fc9fb424a8defb4459ac0474 Mon Sep 17 00:00:00 2001 From: Alex Krolick Date: Tue, 1 May 2018 20:32:04 -0700 Subject: [PATCH 1/3] feat(examples): Add context examples --- examples/__tests__/react-context.js | 55 +++++++++++++++++++++++++++++ examples/jest.config.js | 6 ++++ examples/react-context.js | 18 ++++++++++ jest.config.js | 6 ++++ package.json | 5 +-- 5 files changed, 88 insertions(+), 2 deletions(-) create mode 100644 examples/__tests__/react-context.js create mode 100644 examples/jest.config.js create mode 100644 examples/react-context.js create mode 100644 jest.config.js diff --git a/examples/__tests__/react-context.js b/examples/__tests__/react-context.js new file mode 100644 index 00000000..4d6b1e59 --- /dev/null +++ b/examples/__tests__/react-context.js @@ -0,0 +1,55 @@ +import React from 'react' +import {render} from '../../src' +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:').textContent).toBe('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:').textContent).toBe('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/examples/jest.config.js b/examples/jest.config.js new file mode 100644 index 00000000..7241c603 --- /dev/null +++ b/examples/jest.config.js @@ -0,0 +1,6 @@ +const jestConfig = require('kcd-scripts/jest') + +module.exports = Object.assign(jestConfig, { + testEnvironment: 'jest-environment-jsdom', + roots: ['./'], +}) 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..f0f659ad --- /dev/null +++ b/jest.config.js @@ -0,0 +1,6 @@ +const jestConfig = require('kcd-scripts/jest') + +module.exports = Object.assign(jestConfig, { + testEnvironment: 'jest-environment-jsdom', + projects: ['./examples', './src'], +}) diff --git a/package.json b/package.json index 1663f134..c540bb71 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,9 @@ "add-contributor": "kcd-scripts contributors add", "build": "kcd-scripts build", "lint": "kcd-scripts lint", - "test": "kcd-scripts test", - "test:update": "npm test -- --updateSnapshot --coverage", + "test": "kcd-scripts test --projects=src", + "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" From d7803475e86c64ac67333ec7841b0934c90a6884 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Wed, 2 May 2018 14:13:30 -0600 Subject: [PATCH 2/3] modify the examples --- README.md | 16 +++---- examples/.eslintrc.js | 15 ++++++ examples/README.md | 35 ++++++++++++++ .../__tests__/mock.react-transition-group.js | 2 +- examples/__tests__/react-context.js | 12 ++--- {src => examples}/__tests__/react-redux.js | 2 +- {src => examples}/__tests__/react-router.js | 2 +- .../shallow.react-transition-group.js | 2 +- .../__tests__/update-props.js | 6 ++- examples/jest.config.js | 9 +++- jest.config.js | 4 +- other/jest.config.js | 9 ++++ other/setup-test-env.js | 1 + package.json | 5 +- src/__tests__/react-context.js | 47 ------------------- 15 files changed, 94 insertions(+), 73 deletions(-) create mode 100644 examples/.eslintrc.js create mode 100644 examples/README.md rename {src => examples}/__tests__/mock.react-transition-group.js (96%) rename {src => examples}/__tests__/react-redux.js (98%) rename {src => examples}/__tests__/react-router.js (97%) rename {src => examples}/__tests__/shallow.react-transition-group.js (95%) rename src/__tests__/number-display.js => examples/__tests__/update-props.js (79%) create mode 100644 other/jest.config.js create mode 100644 other/setup-test-env.js delete mode 100644 src/__tests__/react-context.js 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..acc3b052 --- /dev/null +++ b/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 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 index 4d6b1e59..9419ade0 100644 --- a/examples/__tests__/react-context.js +++ b/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() - 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 = ( - + ) 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', () => { ) 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', () => { ) 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') }) 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 index 7241c603..bc3bb80e 100644 --- a/examples/jest.config.js +++ b/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'), + }, }) diff --git a/jest.config.js b/jest.config.js index f0f659ad..2c5ad1e6 100644 --- a/jest.config.js +++ b/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'), }) 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/other/setup-test-env.js b/other/setup-test-env.js new file mode 100644 index 00000000..4435317a --- /dev/null +++ b/other/setup-test-env.js @@ -0,0 +1 @@ +import 'jest-dom/extend-expect' diff --git a/package.json b/package.json index c540bb71..6a456d30 100644 --- a/package.json +++ b/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", 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') -}) From 8c4579cafeadc77a1fef4f0ad6fdd9878cbf5793 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Wed, 2 May 2018 14:45:13 -0600 Subject: [PATCH 3/3] fix example stuff --- examples/README.md | 5 ----- examples/__tests__/react-context.js | 1 + examples/jest.config.js | 2 +- jest.config.js | 1 - other/setup-test-env.js | 1 - package.json | 2 +- 6 files changed, 3 insertions(+), 9 deletions(-) delete mode 100644 other/setup-test-env.js diff --git a/examples/README.md b/examples/README.md index acc3b052..6eda8302 100644 --- a/examples/README.md +++ b/examples/README.md @@ -11,11 +11,6 @@ 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 diff --git a/examples/__tests__/react-context.js b/examples/__tests__/react-context.js index 9419ade0..00d47b58 100644 --- a/examples/__tests__/react-context.js +++ b/examples/__tests__/react-context.js @@ -1,5 +1,6 @@ import React from 'react' import {render} from 'react-testing-library' +import 'jest-dom/extend-expect' import {NameContext, NameProvider, NameConsumer} from '../react-context' /** diff --git a/examples/jest.config.js b/examples/jest.config.js index bc3bb80e..8dc4330d 100644 --- a/examples/jest.config.js +++ b/examples/jest.config.js @@ -2,8 +2,8 @@ const jestConfig = require('kcd-scripts/jest') module.exports = Object.assign(jestConfig, { rootDir: __dirname, + roots: [__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'), diff --git a/jest.config.js b/jest.config.js index 2c5ad1e6..23133e67 100644 --- a/jest.config.js +++ b/jest.config.js @@ -2,5 +2,4 @@ const jestConfig = require('kcd-scripts/jest') module.exports = Object.assign(jestConfig, { displayName: 'library', - setupTestFrameworkScriptFile: require.resolve('./other/setup-test-env'), }) diff --git a/other/setup-test-env.js b/other/setup-test-env.js deleted file mode 100644 index 4435317a..00000000 --- a/other/setup-test-env.js +++ /dev/null @@ -1 +0,0 @@ -import 'jest-dom/extend-expect' diff --git a/package.json b/package.json index 6a456d30..0a4abb76 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "build": "kcd-scripts build", "lint": "kcd-scripts lint", "test": "kcd-scripts test --config=other/jest.config.js", - "test:update": "npm test -- --updateSnapshot --coverage --projects=src", + "test:update": "npm test -- --updateSnapshot --coverage", "validate": "kcd-scripts validate", "setup": "npm install && npm run validate -s", "precommit": "kcd-scripts precommit"