.all-contributorsrc

@@ -576,7 +576,8 @@
       "profile": "https://github.com/weyert",
       "contributions": [
         "ideas",
-        "review"
+        "review",
+        "design"
       ]
     },
     {
@@ -1071,7 +1072,8 @@
       "profile": "https://github.com/samtsai",
       "contributions": [
         "code",
-        "test"
+        "test",
+        "doc"
       ]
     },
     {
@@ -1101,6 +1103,43 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "michael-siek",
+      "name": "Michael",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/45568605?v=4",
+      "profile": "http://michaelsiek.com",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "2dubbing",
+      "name": "Braden Lee",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/15885679?v=4",
+      "profile": "http://2dubbing.tistory.com",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "kamranayub",
+      "name": "Kamran Ayub",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/563819?v=4",
+      "profile": "http://kamranicus.com/",
+      "contributions": [
+        "code",
+        "test"
+      ]
+    },
+    {
+      "login": "MatanBobi",
+      "name": "Matan Borenkraout",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/12711091?v=4",
+      "profile": "https://twitter.com/matanbobi",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.github/ISSUE_TEMPLATE.md

@@ -22,10 +22,8 @@ Thanks for your interest in the project. We appreciate bugs filed and PRs submit
   For questions related to using the library, please visit a support community
   instead of filing an issue on GitHub. You can follow the instructions in this
   codesandbox to make a reproduction of your issue: https://kcd.im/rtl-help
-  * React Spectrum
-    https://spectrum.chat/testing-library
-  * Reactiflux on Discord
-    https://www.reactiflux.com
+  * Discord
+    https://discord.gg/c6JN9fM
   * Stack Overflow
     https://stackoverflow.com/questions/tagged/react-testing-library
 
@@ -76,7 +74,7 @@ Reproduction repository:
 <!--
 If possible, please create a repository that reproduces the issue with the
 minimal amount of code possible. You may fork the template here:
-https://github.com/alexkrolick/dom-testing-library-template
+https://github.com/testing-library/dom-testing-library-template
 
 Or if you can, try to reproduce the issue in a codesandbox. You can fork the
 one here: https://codesandbox.io/s/5z6x4r7n0p

.github/ISSUE_TEMPLATE/Bug_Report.md

@@ -46,7 +46,7 @@ var your => (code) => here;
 
 <!--
 If this is an issue with documentation, please file an issue on the docs repo:
-https://github.com/alexkrolick/testing-library-docs
+https://github.com/testing-library/testing-library-docs
 -->
 
 ### What you did:
@@ -63,7 +63,7 @@ https://github.com/alexkrolick/testing-library-docs
 If possible, please create a repository that reproduces the issue with the
 minimal amount of code possible.
 
-Template repo: https://github.com/alexkrolick/dom-testing-library-template
+Template repo: https://github.com/testing-library/dom-testing-library-template
 
 Or if you can, try to reproduce the issue in a Codesandbox. You can fork the one
 here: https://codesandbox.io/s/5z6x4r7n0p

.github/ISSUE_TEMPLATE/Question.md

@@ -16,10 +16,9 @@ For questions related to using the library, please visit a support community
 instead of filing an issue on GitHub. You can follow the instructions in this
 codesandbox to make a reproduction of your issue: https://kcd.im/rtl-help
 
-- React Spectrum https://spectrum.chat/react-testing-library
-- Reactiflux on Discord https://www.reactiflux.com
+- Discord https://discord.gg/c6JN9fM
 - Stack Overflow
   https://stackoverflow.com/questions/tagged/react-testing-library
-- Documentation: https://github.com/alexkrolick/testing-library-docs
+- Documentation: https://github.com/testing-library/testing-library-docs
 
 **ISSUES WHICH ARE QUESTIONS WILL BE CLOSED**

.github/PULL_REQUEST_TEMPLATE.md

@@ -35,7 +35,7 @@ merge of your pull request!
 <!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->
 
 - [ ] Documentation added to the
-      [docs site](https://github.com/alexkrolick/testing-library-docs)
+      [docs site](https://github.com/testing-library/testing-library-docs)
 - [ ] Tests
 - [ ] Typescript definitions updated
 - [ ] Ready to be merged

.travis.yml

@@ -8,12 +8,15 @@ node_js:
   - 12
   - 14
   - node
+env:
+  - REACT_DIST=latest
+  - REACT_DIST=next
+  - REACT_DIST=experimental
 install:
   - npm install
   # as requested by the React team :)
   # https://reactjs.org/blog/2019/10/22/react-release-channels.html#using-the-next-channel-for-integration-testing
-  - if [ "$TRAVIS_EVENT_TYPE" = "cron" ]; then npm install react@next
-    react-dom@next; fi
+  - npm install react@$REACT_DIST react-dom@$REACT_DIST
 script:
   - npm run validate
   - npx codecov@3
@@ -23,6 +26,9 @@ branches:
     - beta
 
 jobs:
+  allow_failures:
+    - REACT_DIST=next
+    - REACT_DIST=experimental
   include:
     - stage: release
       node_js: 14

CODE_OF_CONDUCT.md

@@ -2,74 +2,127 @@
 
 ## Our Pledge
 
-In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to making participation in our project and
-our community a harassment-free experience for everyone, regardless of age, body
-size, disability, ethnicity, gender identity and expression, level of
-experience, nationality, personal appearance, race, religion, or sexual identity
-and orientation.
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
 
 ## Our Standards
 
-Examples of behavior that contributes to creating a positive environment
-include:
+Examples of behavior that contributes to a positive environment for our
+community include:
 
-- Using welcoming and inclusive language
-- Being respectful of differing viewpoints and experiences
-- Gracefully accepting constructive criticism
-- Focusing on what is best for the community
-- Showing empathy towards other community members
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall
+  community
 
-Examples of unacceptable behavior by participants include:
+Examples of unacceptable behavior include:
 
-- The use of sexualized language or imagery and unwelcome sexual attention or
-  advances
-- Trolling, insulting/derogatory comments, and personal or political attacks
+- The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
 - Public or private harassment
-- Publishing others' private information, such as a physical or electronic
-  address, without explicit permission
+- Publishing others' private information, such as a physical or email address,
+  without their explicit permission
 - Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
-## Our Responsibilities
+## Enforcement Responsibilities
 
-Project maintainers are responsible for clarifying the standards of acceptable
-behavior and are expected to take appropriate and fair corrective action in
-response to any instances of unacceptable behavior.
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
 
-Project maintainers have the right and responsibility to remove, edit, or reject
+Community leaders have the right and responsibility to remove, edit, or reject
 comments, commits, code, wiki edits, issues, and other contributions that are
-not aligned to this Code of Conduct, or to ban temporarily or permanently any
-contributor for other behaviors that they deem inappropriate, threatening,
-offensive, or harmful.
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
 
 ## Scope
 
-This Code of Conduct applies both within project spaces and in public spaces
-when an individual is representing the project or its community. Examples of
-representing a project or community include using an official project e-mail
-address, posting via an official social media account, or acting as an appointed
-representative at an online or offline event. Representation of a project may be
-further defined and clarified by project maintainers.
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
 
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at kent+coc@doddsfamily.us. All
-complaints will be reviewed and investigated and will result in a response that
-is deemed necessary and appropriate to the circumstances. The project team is
-obligated to maintain confidentiality with regard to the reporter of an
-incident. Further details of specific enforcement policies may be posted
-separately.
+reported to the community leaders responsible for enforcement at
+me+coc@kentcdodds.com. All complaints will be reviewed and investigated promptly
+and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
 
-Project maintainers who do not follow or enforce the Code of Conduct in good
-faith may face temporary or permanent repercussions as determined by other
-members of the project's leadership.
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
 
 ## Attribution
 
 This Code of Conduct is adapted from the [Contributor Covenant][homepage],
-version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
 
-[homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

CONTRIBUTING.md

@@ -34,8 +34,13 @@ sure to include those changes (if they exist) in your commit.
 
 ### Update Typings
 
-The TypeScript type definitions are in the
-[DefinitelyTyped repo](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__react)
+If your PR introduced some changes in the API, you are more than welcome to
+modify the Typescript type definition to reflect those changes. Just modify the
+`/types/index.d.ts` file accordingly. If you have never seen Typescript
+definitions before, you can read more about it in its
+[documentation pages](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html).
+Though this library itself is not written in Typescript we use
+[dtslint](https://github.com/microsoft/dtslint) to lint our typings.
 
 ## Help needed
 

README.md

@@ -31,7 +31,7 @@ practices.</p>
 
 [![All Contributors](https://img.shields.io/badge/all_contributors-102-orange.svg?style=flat-square)](#contributors)
 [![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc]
-[![Join the community on Spectrum][spectrum-badge]][spectrum]
+[![Discord][discord-badge]][discord]
 
 [![Watch on GitHub][github-watch-badge]][github-watch]
 [![Star on GitHub][github-star-badge]][github-star]
@@ -101,9 +101,11 @@ should be installed as one of your project's `devDependencies`:
 ```
 npm install --save-dev @testing-library/react
 ```
+
 or
 
 for installation via [yarn](https://classic.yarnpkg.com/en/)
+
 ```
 yarn add --dev @testing-library/react
 ```
@@ -173,7 +175,9 @@ function HiddenMessage({children}) {
 }
 
 export default HiddenMessage
+```
 
+```jsx
 // __tests__/hidden-message.js
 // these imports are something you'd normally configure Jest to import for you
 // automatically. Learn more in the setup docs: https://testing-library.com/docs/react-testing-library/setup#cleanup
@@ -281,11 +285,14 @@ import Login from '../login'
 const server = setupServer(
   rest.post('/api/login', (req, res, ctx) => {
     return res(ctx.json({token: 'fake_user_token'}))
-  })
+  }),
 )
 
 beforeAll(() => server.listen())
-afterEach(() => server.resetHandlers())
+afterEach(() => {
+  server.resetHandlers()
+  window.localStorage.removeItem('token')
+})
 afterAll(() => server.close())
 
 test('allows the user to login successfully', async () => {
@@ -316,11 +323,8 @@ test('handles server exceptions', async () => {
   // mock the server error response for this test suite only.
   server.use(
     rest.post('/', (req, res, ctx) => {
-      return res(
-        ctx.status(500),
-        ctx.json({message: 'Internal server error'}),
-      )
-    })
+      return res(ctx.status(500), ctx.json({message: 'Internal server error'}))
+    }),
   )
 
   render(<Login />)
@@ -424,8 +428,7 @@ a 👍. This helps maintainers prioritize what to work on.
 For questions related to using the library, please visit a support community
 instead of filing an issue on GitHub.
 
-- [Spectrum][spectrum]
-- [Reactiflux on Discord][reactiflux]
+- [Discord][discord]
 - [Stack Overflow][stackoverflow]
 
 ## Contributors
@@ -511,7 +514,7 @@ Thanks goes to these people ([emoji key][emojis]):
   <tr>
     <td align="center"><a href="http://www.aboutmonica.com"><img src="https://avatars0.githubusercontent.com/u/6998954?v=4" width="100px;" alt=""/><br /><sub><b>Monica Powell</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/commits?author=M0nica" title="Documentation">📖</a></td>
     <td align="center"><a href="http://sivkoff.com"><img src="https://avatars1.githubusercontent.com/u/2699953?v=4" width="100px;" alt=""/><br /><sub><b>Vitaly Sivkov</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/commits?author=sivkoff" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/weyert"><img src="https://avatars3.githubusercontent.com/u/7049?v=4" width="100px;" alt=""/><br /><sub><b>Weyert de Boer</b></sub></a><br /><a href="#ideas-weyert" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/testing-library/react-testing-library/pulls?q=is%3Apr+reviewed-by%3Aweyert" title="Reviewed Pull Requests">👀</a></td>
+    <td align="center"><a href="https://github.com/weyert"><img src="https://avatars3.githubusercontent.com/u/7049?v=4" width="100px;" alt=""/><br /><sub><b>Weyert de Boer</b></sub></a><br /><a href="#ideas-weyert" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/testing-library/react-testing-library/pulls?q=is%3Apr+reviewed-by%3Aweyert" title="Reviewed Pull Requests">👀</a> <a href="#design-weyert" title="Design">🎨</a></td>
     <td align="center"><a href="https://github.com/EstebanMarin"><img src="https://avatars3.githubusercontent.com/u/13613037?v=4" width="100px;" alt=""/><br /><sub><b>EstebanMarin</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/commits?author=EstebanMarin" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/vctormb"><img src="https://avatars2.githubusercontent.com/u/13953703?v=4" width="100px;" alt=""/><br /><sub><b>Victor Martins</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/commits?author=vctormb" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/RoystonS"><img src="https://avatars0.githubusercontent.com/u/19773?v=4" width="100px;" alt=""/><br /><sub><b>Royston Shufflebotham</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/issues?q=author%3ARoystonS" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/react-testing-library/commits?author=RoystonS" title="Documentation">📖</a> <a href="#example-RoystonS" title="Examples">💡</a></td>
@@ -577,12 +580,16 @@ Thanks goes to these people ([emoji key][emojis]):
     <td align="center"><a href="https://github.com/stevenfitzpatrick"><img src="https://avatars0.githubusercontent.com/u/23268855?v=4" width="100px;" alt=""/><br /><sub><b>Steven Fitzpatrick</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/issues?q=author%3Astevenfitzpatrick" title="Bug reports">🐛</a></td>
     <td align="center"><a href="https://github.com/juangl"><img src="https://avatars0.githubusercontent.com/u/1887029?v=4" width="100px;" alt=""/><br /><sub><b>Juan Je García</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/commits?author=juangl" title="Documentation">📖</a></td>
     <td align="center"><a href="https://ghuser.io/Ishaan28malik"><img src="https://avatars3.githubusercontent.com/u/27343592?v=4" width="100px;" alt=""/><br /><sub><b>Championrunner</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/commits?author=Ishaan28malik" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/samtsai"><img src="https://avatars0.githubusercontent.com/u/225526?v=4" width="100px;" alt=""/><br /><sub><b>Sam Tsai</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/commits?author=samtsai" title="Code">💻</a> <a href="https://github.com/testing-library/react-testing-library/commits?author=samtsai" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/samtsai"><img src="https://avatars0.githubusercontent.com/u/225526?v=4" width="100px;" alt=""/><br /><sub><b>Sam Tsai</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/commits?author=samtsai" title="Code">💻</a> <a href="https://github.com/testing-library/react-testing-library/commits?author=samtsai" title="Tests">⚠️</a> <a href="https://github.com/testing-library/react-testing-library/commits?author=samtsai" title="Documentation">📖</a></td>
     <td align="center"><a href="https://www.echooff.dev"><img src="https://avatars0.githubusercontent.com/u/149248?v=4" width="100px;" alt=""/><br /><sub><b>Christian Rackerseder</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/commits?author=screendriver" title="Code">💻</a></td>
   </tr>
   <tr>
     <td align="center"><a href="https://github.com/NiGhTTraX"><img src="https://avatars0.githubusercontent.com/u/485061?v=4" width="100px;" alt=""/><br /><sub><b>Andrei Picus</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/issues?q=author%3ANiGhTTraX" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/react-testing-library/pulls?q=is%3Apr+reviewed-by%3ANiGhTTraX" title="Reviewed Pull Requests">👀</a></td>
     <td align="center"><a href="https://redd.one"><img src="https://avatars3.githubusercontent.com/u/14984911?v=4" width="100px;" alt=""/><br /><sub><b>Artem Zakharchenko</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/commits?author=kettanaito" title="Documentation">📖</a></td>
+    <td align="center"><a href="http://michaelsiek.com"><img src="https://avatars0.githubusercontent.com/u/45568605?v=4" width="100px;" alt=""/><br /><sub><b>Michael</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/commits?author=michael-siek" title="Documentation">📖</a></td>
+    <td align="center"><a href="http://2dubbing.tistory.com"><img src="https://avatars2.githubusercontent.com/u/15885679?v=4" width="100px;" alt=""/><br /><sub><b>Braden Lee</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/commits?author=2dubbing" title="Documentation">📖</a></td>
+    <td align="center"><a href="http://kamranicus.com/"><img src="https://avatars1.githubusercontent.com/u/563819?v=4" width="100px;" alt=""/><br /><sub><b>Kamran Ayub</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/commits?author=kamranayub" title="Code">💻</a> <a href="https://github.com/testing-library/react-testing-library/commits?author=kamranayub" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://twitter.com/matanbobi"><img src="https://avatars2.githubusercontent.com/u/12711091?v=4" width="100px;" alt=""/><br /><sub><b>Matan Borenkraout</b></sub></a><br /><a href="https://github.com/testing-library/react-testing-library/commits?author=MatanBobi" title="Code">💻</a></td>
   </tr>
 </table>
 
@@ -609,8 +616,6 @@ Contributions of any kind welcome!
 [package]: https://www.npmjs.com/package/@testing-library/react
 [downloads-badge]: https://img.shields.io/npm/dm/@testing-library/react.svg?style=flat-square
 [npmtrends]: http://www.npmtrends.com/@testing-library/react
-[spectrum-badge]: https://withspectrum.github.io/badge/badge.svg
-[spectrum]: https://spectrum.chat/testing-library
 [license-badge]: https://img.shields.io/npm/l/@testing-library/react.svg?style=flat-square
 [license]: https://github.com/testing-library/react-testing-library/blob/master/LICENSE
 [prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
@@ -629,7 +634,8 @@ Contributions of any kind welcome!
 [bugs]: https://github.com/testing-library/react-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc
 [requests]: https://github.com/testing-library/react-testing-library/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen
 [good-first-issue]: https://github.com/testing-library/react-testing-library/issues?utf8=✓&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3A"good+first+issue"+
-[reactiflux]: https://www.reactiflux.com/
+[discord-badge]: https://img.shields.io/discord/723559267868737556.svg?color=7389D8&labelColor=6A7EC2&logo=discord&logoColor=ffffff&style=flat-square
+[discord]: https://discord.gg/c6JN9fM
 [stackoverflow]: https://stackoverflow.com/questions/tagged/react-testing-library
 [react-hooks-testing-library]: https://github.com/testing-library/react-hooks-testing-library
 

other/design files/README.txt

@@ -0,0 +1,13 @@
+# Cheat sheet design
+
+The cheat sheet document has been created using the desktop publishing software called Affinity Publisher, the original source file can be found in this folder
+
+## Fonts used
+
+- Menlo
+- Arial
+
+## Standard distances
+
+15pt between boxes
+8pt margin from box edge to inner text

package.json

@@ -43,20 +43,20 @@
   "author": "Kent C. Dodds <me@kentcdodds.com> (https://kentcdodds.com)",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.10.2",
-    "@testing-library/dom": "^7.9.0"
+    "@babel/runtime": "^7.10.3",
+    "@testing-library/dom": "^7.17.1"
   },
   "devDependencies": {
-    "@reach/router": "^1.3.3",
-    "@testing-library/jest-dom": "^5.9.0",
+    "@testing-library/jest-dom": "^5.10.1",
     "@types/react-dom": "^16.9.8",
     "dotenv-cli": "^3.1.0",
-    "dtslint": "3.6.9",
-    "kcd-scripts": "^6.2.0",
+    "dtslint": "3.6.12",
+    "kcd-scripts": "^6.2.3",
     "npm-run-all": "^4.1.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "rimraf": "^3.0.2"
+    "rimraf": "^3.0.2",
+    "typescript": "^3.9.5"
   },
   "peerDependencies": {
     "react": "*",
@@ -68,7 +68,8 @@
       "react/prop-types": "off",
       "react/no-adjacent-inline-elements": "off",
       "import/no-unassigned-import": "off",
-      "import/named": "off"
+      "import/named": "off",
+      "testing-library/no-dom-import": "off"
     }
   },
   "eslintIgnore": [

src/__tests__/auto-cleanup.js

@@ -9,5 +9,5 @@ test('first', () => {
 })
 
 test('second', () => {
-  expect(document.body.innerHTML).toEqual('')
+  expect(document.body).toBeEmptyDOMElement()
 })

src/__tests__/cleanup.js

@@ -18,11 +18,25 @@ test('cleans up the document', async () => {
 
   render(<Test />)
   await cleanup()
-  expect(document.body.innerHTML).toBe('')
+  expect(document.body).toBeEmptyDOMElement()
   expect(spy).toHaveBeenCalledTimes(1)
 })
 
 test('cleanup does not error when an element is not a child', async () => {
   render(<div />, {container: document.createElement('div')})
   await cleanup()
 })
+
+test('cleanup runs effect cleanup functions', async () => {
+  const spy = jest.fn()
+
+  const Test = () => {
+    React.useEffect(() => spy)
+
+    return null
+  }
+
+  render(<Test />)
+  await cleanup()
+  expect(spy).toHaveBeenCalledTimes(1)
+})

src/__tests__/debug.js

@@ -49,4 +49,8 @@ test('allows same arguments as prettyDOM', () => {
   `)
 })
 
-/* eslint no-console:0 */
+/*
+eslint
+  no-console: "off",
+  testing-library/no-debug: "off",
+*/

src/__tests__/events.js

@@ -211,3 +211,30 @@ test('calling `fireEvent` directly works too', () => {
     }),
   )
 })
+
+test('blur/foucs bubbles in react', () => {
+  const handleBlur = jest.fn()
+  const handleBubbledBlur = jest.fn()
+  const handleFocus = jest.fn()
+  const handleBubbledFocus = jest.fn()
+  const {container} = render(
+    <div onBlur={handleBubbledBlur} onFocus={handleBubbledFocus}>
+      <button onBlur={handleBlur} onFocus={handleFocus} />
+    </div>,
+  )
+  const button = container.firstChild.firstChild
+
+  fireEvent.focus(button)
+
+  expect(handleBlur).toHaveBeenCalledTimes(0)
+  expect(handleBubbledBlur).toHaveBeenCalledTimes(0)
+  expect(handleFocus).toHaveBeenCalledTimes(1)
+  expect(handleBubbledFocus).toHaveBeenCalledTimes(1)
+
+  fireEvent.blur(button)
+
+  expect(handleBlur).toHaveBeenCalledTimes(1)
+  expect(handleBubbledBlur).toHaveBeenCalledTimes(1)
+  expect(handleFocus).toHaveBeenCalledTimes(1)
+  expect(handleBubbledFocus).toHaveBeenCalledTimes(1)
+})

src/__tests__/multi-base.js

@@ -37,3 +37,9 @@ test('baseElement isolates trees from one another', () => {
     'Unable to find an element with the text: Hyde.',
   )
 })
+
+// https://github.com/testing-library/eslint-plugin-testing-library/issues/188
+/*
+eslint
+  testing-library/prefer-screen-queries: "off",
+*/

src/__tests__/render.js

@@ -87,3 +87,17 @@ test('renders options.wrapper around node', () => {
 </div>
 `)
 })
+
+test('flushes useEffect cleanup functions sync on unmount()', () => {
+  const spy = jest.fn()
+  function Component() {
+    React.useEffect(() => spy, [])
+    return null
+  }
+  const {unmount} = render(<Component />)
+  expect(spy).toHaveBeenCalledTimes(0)
+
+  unmount()
+
+  expect(spy).toHaveBeenCalledTimes(1)
+})

src/__tests__/stopwatch.js

@@ -47,7 +47,7 @@ test('unmounts a component', async () => {
   // hey there reader! You don't need to have an assertion like this one
   // this is just me making sure that the unmount function works.
   // You don't need to do this in your apps. Just rely on the fact that this works.
-  expect(container.innerHTML).toBe('')
+  expect(container).toBeEmptyDOMElement()
   // just wait to see if the interval is cleared or not
   // if it's not, then we'll call setState on an unmounted component
   // and get an error.

src/fire-event.js

@@ -41,4 +41,18 @@ fireEvent.select = (node, init) => {
   fireEvent.keyUp(node, init)
 }
 
+// React event system tracks native focusout/focusin events for
+// running blur/focus handlers
+// @link https://github.com/facebook/react/pull/19186
+const blur = fireEvent.blur
+const focus = fireEvent.focus
+fireEvent.blur = (...args) => {
+  fireEvent.focusOut(...args)
+  return blur(...args)
+}
+fireEvent.focus = (...args) => {
+  fireEvent.focusIn(...args)
+  return focus(...args)
+}
+
 export {fireEvent}

src/flush-microtasks.js

@@ -3,11 +3,21 @@
 // and the part that is not cannot easily have useful tests written
 // anyway. So we're just going to ignore coverage for this file
 /**
- * copied from React's enqueueTask.js
+ * copied and modified from React's enqueueTask.js
  */
 
+function getIsUsingFakeTimers() {
+  return (
+    typeof jest !== 'undefined' &&
+    typeof setTimeout !== 'undefined' &&
+    (setTimeout.hasOwnProperty('_isMockFunction') ||
+      setTimeout.hasOwnProperty('clock'))
+  )
+}
+
 let didWarnAboutMessageChannel = false
 let enqueueTask
+
 try {
   // read require off the module object to get around the bundlers.
   // we don't want them to detect a require and bundle a Node polyfill.
@@ -43,7 +53,15 @@ try {
 export default function flushMicroTasks() {
   return {
     then(resolve) {
-      enqueueTask(resolve)
+      if (getIsUsingFakeTimers()) {
+        // without this, a test using fake timers would never get microtasks
+        // actually flushed. I spent several days on this... Really hard to
+        // reproduce the problem, so there's no test for it. But it works!
+        jest.advanceTimersByTime(0)
+        resolve()
+      } else {
+        enqueueTask(resolve)
+      }
     },
   }
 }

src/pure.js

@@ -74,7 +74,11 @@ function render(
           el.forEach(e => console.log(prettyDOM(e, maxLength, options)))
         : // eslint-disable-next-line no-console,
           console.log(prettyDOM(el, maxLength, options)),
-    unmount: () => ReactDOM.unmountComponentAtNode(container),
+    unmount: () => {
+      act(() => {
+        ReactDOM.unmountComponentAtNode(container)
+      })
+    },
     rerender: rerenderUi => {
       render(wrapUiIfNeeded(rerenderUi), {container, baseElement})
       // Intentionally do not return anything to avoid unnecessarily complicating the API.
@@ -97,8 +101,10 @@ function render(
 }
 
 async function cleanup() {
-  await flush()
   mountedContainers.forEach(cleanupAtContainer)
+  // flush microtask queue after unmounting in case
+  // unmount sequence generates new microtasks
+  await flush()
 }
 
 // maybe one day we'll expose this (perhaps even as a utility returned by render).