Merge branch 'main' into dont-install-dom

nickserv · nickserv · commit dc939364a68e · 2023-11-09T20:22:02.000-05:00
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -2564,6 +2564,33 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "bsheps",
+      "name": "bsheps",
+      "avatar_url": "https://avatars.githubusercontent.com/u/35780702?v=4",
+      "profile": "https://github.com/bsheps",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "kyle-n",
+      "name": "Kyle Nazario",
+      "avatar_url": "https://avatars.githubusercontent.com/u/13384477?v=4",
+      "profile": "http://www.kylenazario.com",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "thefalked",
+      "name": "Giuliano Crivelli",
+      "avatar_url": "https://avatars.githubusercontent.com/u/28029756?v=4",
+      "profile": "https://github.com/thefalked",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,
diff --git a/README.md b/README.md
@@ -499,6 +499,9 @@ Thanks goes to these wonderful people
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/andnorda"><img src="https://avatars.githubusercontent.com/u/1894119?v=4?s=100" width="100px;" alt="Andreas Nordahl"/><br /><sub><b>Andreas Nordahl</b></sub></a><br /><a href="https://github.com/testing-library/testing-library-docs/commits?author=andnorda" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://neaumusic.github.io"><img src="https://avatars.githubusercontent.com/u/3423750?v=4?s=100" width="100px;" alt="neaumusic"/><br /><sub><b>neaumusic</b></sub></a><br /><a href="https://github.com/testing-library/testing-library-docs/commits?author=neaumusic" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/JoyelJohny"><img src="https://avatars.githubusercontent.com/u/81413791?v=4?s=100" width="100px;" alt="Joyel Johny"/><br /><sub><b>Joyel Johny</b></sub></a><br /><a href="https://github.com/testing-library/testing-library-docs/commits?author=JoyelJohny" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/bsheps"><img src="https://avatars.githubusercontent.com/u/35780702?v=4?s=100" width="100px;" alt="bsheps"/><br /><sub><b>bsheps</b></sub></a><br /><a href="https://github.com/testing-library/testing-library-docs/commits?author=bsheps" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://www.kylenazario.com"><img src="https://avatars.githubusercontent.com/u/13384477?v=4?s=100" width="100px;" alt="Kyle Nazario"/><br /><sub><b>Kyle Nazario</b></sub></a><br /><a href="https://github.com/testing-library/testing-library-docs/commits?author=kyle-n" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/thefalked"><img src="https://avatars.githubusercontent.com/u/28029756?v=4?s=100" width="100px;" alt="Giuliano Crivelli"/><br /><sub><b>Giuliano Crivelli</b></sub></a><br /><a href="https://github.com/testing-library/testing-library-docs/commits?author=thefalked" title="Documentation">📖</a></td>
     </tr>
   </tbody>
 </table>
diff --git a/docs/bs-react-testing-library/intro.mdx b/docs/bs-react-testing-library/intro.mdx
@@ -15,6 +15,9 @@ Bindings for several testing libraries have been ported to [ReasonML][re].
 
 ```bash npm2yarn
 npm install --save-dev bs-dom-testing-library
+```
+
+```bash npm2yarn
 npm install --save-dev bs-react-testing-library
 ```
 
diff --git a/docs/dom-testing-library/api-custom-queries.mdx b/docs/dom-testing-library/api-custom-queries.mdx
@@ -3,9 +3,6 @@ id: api-custom-queries
 title: Custom Queries
 ---
 
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
-
 `DOM Testing Library` exposes many of the helper functions that are used to
 implement the default queries. You can use the helpers to build custom queries.
 For example, the code below shows a way to override the default `testId` queries
diff --git a/docs/dom-testing-library/api-debugging.mdx b/docs/dom-testing-library/api-debugging.mdx
@@ -32,7 +32,7 @@ value is `7000`. You will see `...` in the console, when the DOM content is
 stripped off, because of the length you have set or due to default size limit.
 Here's how you might increase this limit when running tests:
 
-```
+```bash npm2yarn
 DEBUG_PRINT_LIMIT=10000 npm test
 ```
 
@@ -46,7 +46,7 @@ colors, such as in cases where the output is written to a log file for debugging
 purposes. You can use the environment variable `COLORS` to explicitly force the
 colorization off or on. For example:
 
-```
+```bash npm2yarn
 COLORS=false npm test
 ```
 
diff --git a/docs/ecosystem-user-event.mdx b/docs/ecosystem-user-event.mdx
@@ -3,9 +3,6 @@ id: ecosystem-user-event
 title: user-event v13
 ---
 
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
-
 [`user-event`][gh] is a companion library for Testing Library that provides more
 advanced simulation of browser interactions than the built-in
 [`fireEvent`](dom-testing-library/api-events.mdx#fireevent) method.
@@ -21,23 +18,10 @@ fixes and new features.
 
 ## Installation
 
-  <Tabs defaultValue="npm" values={[{ label: 'npm', value: 'npm' }, { label: 'Yarn', value: 'yarn' }]}>
-  <TabItem value="npm">
-
-```sh
+```bash npm2yarn
 npm install --save-dev @testing-library/user-event
 ```
 
-  </TabItem>
-  <TabItem value="yarn">
-
-```sh
-yarn add --dev @testing-library/user-event
-```
-
-  </TabItem>
-  </Tabs>
-
 Now simply import it in your tests:
 
 ```js
diff --git a/docs/example-react-intl.mdx b/docs/example-react-intl.mdx
@@ -141,4 +141,4 @@ the component in a way that will simulate the user behavior as much as posible.
 | Use strings from the default language      | Test is easy to read, and asserts expected default output. If you have variables in your strings, you can test that they work properly with correct output.                                                                                                                          | 1. Strings hardcoded into tests mean you have to update both tests and code for any copy changes. 2. If multiple elements have the same string/substring text, find-and-replace may be hard to use reliably.                                                          |
 | Mock the translation library               | If your library is difficult to use in the test environment, you can mock it so it is easier. For example, you can add the message ID as a data-attribute to the text so you can query by that.                                                                                      | Test code deviates from what runs in production. Tests may assert about message IDs but not enough about content, so errors are possible.                                                                                                                             |
 | Use translation library in tests           | Decouples strings from tests, so you can update the message files in one place without worrying about breaking tests. Can run tests in another language or multiple languages. `const buttonText = getNodeText(<FormattedMessage id="buttonText" defaultMessage="Hello Button" />);` | Overhead - it takes more lines of code to write the test, and you need to know the variables and message IDs to create the right strings. It's not obvious what the text actually is when you read the test code, making maintaining it harder.                       |
-| Use translation library + inline snapshots | Same as above, but by adding an inline snapshot of the string, you can read the test code and see what strings are in use, but easily update them with `jest -u` if the messages change. `expect(buttonText).toMatchInlineSnapshot("'My button text'")`                              | Tests are longer because of the extra lines. You can wrap up some of the translation-related code into a helper function to make it a little more inline-able and avoid repeating yourself, but you still need to know the message IDs and variables inside the test. |
+| Use translation library + inline snapshots | Same as above, but by adding an inline snapshot of the string, you can read the test code and see what strings are in use, but easily update them with `jest --updateSnapshot` if the messages change. `expect(buttonText).toMatchInlineSnapshot("'My button text'")`                | Tests are longer because of the extra lines. You can wrap up some of the translation-related code into a helper function to make it a little more inline-able and avoid repeating yourself, but you still need to know the message IDs and variables inside the test. |
diff --git a/docs/marko-testing-library/api.mdx b/docs/marko-testing-library/api.mdx
@@ -294,8 +294,8 @@ You can turn off the automatic test cleanup by importing the following module:
 import '@marko/testing-library/dont-cleanup-after-each'
 ```
 
-With mocha you can use `mocha -r @marko/testing-library/dont-cleanup-after-each`
-as a shorthand.
+With mocha you can use
+`mocha --require @marko/testing-library/dont-cleanup-after-each` as a shorthand.
 
 If you are using Jest, you can include
 `setupFilesAfterEnv: ["@marko/testing-library/dont-cleanup-after-each"]` in your
diff --git a/docs/marko-testing-library/setup.mdx b/docs/marko-testing-library/setup.mdx
@@ -80,7 +80,7 @@ To run server-side Marko tests with `mocha` you can simply run the following
 command:
 
 ```console
-mocha -r marko/node-require
+mocha --require marko/node-require
 ```
 
 This enables the
diff --git a/docs/nightwatch-testing-library/intro.mdx b/docs/nightwatch-testing-library/intro.mdx
@@ -14,7 +14,7 @@ in [Nightwatch](https://nightwatchjs.org) for end-to-end web testing.
 then just
 
 ```bash npm2yarn
-npm install -D @testing-library/nightwatch
+npm install --save-dev @testing-library/nightwatch
 ```
 
 - [nightwatch-testing-library on GitHub][gh]
diff --git a/docs/preact-testing-library/api.mdx b/docs/preact-testing-library/api.mdx
@@ -52,9 +52,12 @@ const {results} = render(<YourComponent />, {options})
 
 Unmounts the component from the container and destroys the container.
 
-📝 When you import anything from the library, this automatically runs after each
-test. If you'd like to disable this then set `process.env.PTL_SKIP_AUTO_CLEANUP`
-to true when running your tests.
+> This is called automatically if your testing framework (such as mocha, Jest or
+> Jasmine) injects a global `afterEach()` function into the testing environment.
+> If not, you will need to call `cleanup()` after each test.
+
+If you'd like to disable this then set `process.env.PTL_SKIP_AUTO_CLEANUP` to
+true when running your tests.
 
 ```jsx
 import {render, cleanup} from '@testing-library/preact'
diff --git a/docs/queries/byrole.mdx b/docs/queries/byrole.mdx
@@ -181,15 +181,15 @@ For example in
 ```html
 <body>
   <nav>
-    <a href="current/page" aria-current="true">👍</a>
+    <a href="current/page" aria-current="page">👍</a>
     <a href="another/page">👎</a>
   </nav>
 </body>
 ```
 
-you can get the "👍" link by calling `getByRole('link', { current: true })` and
-the "👎" by calling `getByRole('link', { current: false })`. To learn more about
-the current state see
+you can get the "👍" link by calling `getByRole('link', { current: 'page' })`
+and the "👎" by calling `getByRole('link', { current: false })`. To learn more
+about the current state see
 [ARIA `aria-current`](https://www.w3.org/TR/wai-aria-1.2/#aria-current).
 
 ### `pressed`
diff --git a/docs/react-testing-library/api.mdx b/docs/react-testing-library/api.mdx
@@ -289,10 +289,9 @@ expect(firstRender).toMatchDiffSnapshot(asFragment())
 
 Unmounts React trees that were mounted with [render](#render).
 
-> Please note that this is done automatically if the testing framework you're
-> using supports the `afterEach` global and it is injected to your testing
-> environment (like mocha, Jest, and Jasmine). If not, you will need to do
-> manual cleanups after each test.
+> This is called automatically if your testing framework (such as mocha, Jest or
+> Jasmine) injects a global `afterEach()` function into the testing environment.
+> If not, you will need to call `cleanup()` after each test.
 
 For example, if you're using the [ava](https://github.com/avajs/ava) testing
 framework, then you would need to use the `test.afterEach` hook like so:
diff --git a/docs/react-testing-library/setup.mdx b/docs/react-testing-library/setup.mdx
@@ -478,7 +478,7 @@ do this with Jest's `setupFiles` configuration:
 Or with mocha's `-r` flag:
 
 ```
-mocha -r @testing-library/react/dont-cleanup-after-each
+mocha --require @testing-library/react/dont-cleanup-after-each
 ```
 
 Alternatively, you could import `@testing-library/react/pure` in all your tests
@@ -508,5 +508,5 @@ exports.mochaHooks = {
 And register it using mocha's `-r` flag:
 
 ```
-mocha -r ./mocha-watch-cleanup-after-each.js
+mocha --require ./mocha-watch-cleanup-after-each.js
 ```
diff --git a/docs/svelte-testing-library/api.mdx b/docs/svelte-testing-library/api.mdx
@@ -70,7 +70,9 @@ const {results} = render(YourComponent, {myProp: 'value'})
 
 ## `cleanup`
 
-> You don't need to import or use this, it's done automagically for you!
+> This is called automatically if your testing framework (such as mocha, Jest or
+> Jasmine) injects a global `afterEach()` function into the testing environment.
+> If not, you will need to call `cleanup()` after each test.
 
 Unmounts the component from the container and destroys the container.
 
diff --git a/docs/svelte-testing-library/setup.mdx b/docs/svelte-testing-library/setup.mdx
@@ -46,7 +46,8 @@ npm install --save-dev @vitest/ui
    npm install --save-dev @sveltejs/vite-plugin-svelte vite
    ```
 
-3. Add a `vitest.config.ts` configuration file to the root of your project
+3. Add a `vitest.config.ts` configuration file to the root of your project. Add
+   `globals: true` so `cleanup()` runs after each test.
 
    ```js
    import {defineConfig} from 'vitest/config'
@@ -86,7 +87,7 @@ npm install --save-dev @vitest/ui
    how) and run the following command to run the tests.
 
    ```bash npm2yarn
-   npm run test
+   npm test
    ```
 
 ## Jest
@@ -103,7 +104,7 @@ npm install --save-dev @vitest/ui
     {
       "scripts": {
         "test": "jest src",
-        "test:watch": "npm run test -- --watch"
+        "test:watch": "jest src --watch"
       }
     }
     ```
@@ -179,7 +180,7 @@ npm install --save-dev @vitest/ui
     and run it
 
     ```bash npm2yarn
-    npm run test
+    npm test
     ```
 
 ### TypeScript
diff --git a/docs/user-event/install.mdx b/docs/user-event/install.mdx
@@ -3,29 +3,10 @@ id: install
 title: Installation
 ---
 
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
-
-<Tabs defaultValue="npm" values={[
-    { label: 'npm', value: 'npm' },
-    { label: 'Yarn', value: 'yarn' },
-]}>
-<TabItem value="npm">
-
-```sh
+```bash npm2yarn
 npm install --save-dev @testing-library/user-event
 ```
 
-</TabItem>
-<TabItem value="yarn">
-
-```sh
-yarn add --dev @testing-library/user-event
-```
-
-</TabItem>
-</Tabs>
-
 Note that `@testing-library/user-event` requires `@testing-library/dom`.
 
 If you use one of the
diff --git a/docs/user-event/options.mdx b/docs/user-event/options.mdx
@@ -38,7 +38,7 @@ The feature therefore will not constitute a breaking change.
 ### delay
 
 Between some subsequent inputs like typing a series of characters the code
-execution is delayed per `setTimeout` for (at least) `delay` seconds.
+execution is delayed per `setTimeout` for (at least) `delay` milliseconds.
 
 This moves the next changes at least to the next macro task and allows other
 (asynchronous) code to run between events.
diff --git a/docs/vue-testing-library/api.mdx b/docs/vue-testing-library/api.mdx
@@ -232,9 +232,9 @@ See a working example of `update` in the
 Unmounts Vue trees that were mounted with
 [render](#rendercomponent-options-callback).
 
-> If you are using an environment that supports `afterEach` hook (as in Jest),
-> there's no need to call `cleanup` manually. Vue Testing Library handles it for
-> you.
+> This is called automatically if your testing framework (such as mocha, Jest or
+> Jasmine) injects a global `afterEach()` function into the testing environment.
+> If not, you will need to call `cleanup()` after each test.
 
 Failing to call `cleanup` when you've called `render` could result in a memory
 leak and tests which are not idempotent (which can lead to difficult to debug
diff --git a/docs/webdriverio-testing-library/intro.mdx b/docs/webdriverio-testing-library/intro.mdx
@@ -14,7 +14,7 @@ queries in [WebdriverIO](https://webdriver.io/) for end-to-end web testing.
 then just
 
 ```bash npm2yarn
-npm install -D @testing-library/webdriverio
+npm install --save-dev @testing-library/webdriverio
 ```
 
 - [webdriverio-testing-library on GitHub][gh]
