From 94c161dd64af1e80b739d83594cbdf99ded9374c Mon Sep 17 00:00:00 2001 From: Nick McCurdy Date: Thu, 2 Nov 2023 16:14:13 -0400 Subject: [PATCH 1/6] chore: cleanup unused `Tabs` and `TabItem` imports --- docs/dom-testing-library/api-custom-queries.mdx | 3 --- 1 file changed, 3 deletions(-) diff --git a/docs/dom-testing-library/api-custom-queries.mdx b/docs/dom-testing-library/api-custom-queries.mdx index 452f518f7..8147ead50 100644 --- 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 From 47c5eb025c6889a22c09d983cb55f995f25c05ef Mon Sep 17 00:00:00 2001 From: Nick McCurdy Date: Thu, 2 Nov 2023 16:55:10 -0400 Subject: [PATCH 2/6] chore: use `npm2yarn` consistently --- docs/dom-testing-library/api-debugging.mdx | 4 ++-- docs/ecosystem-user-event.mdx | 18 +----------------- docs/user-event/install.mdx | 21 +-------------------- 3 files changed, 4 insertions(+), 39 deletions(-) diff --git a/docs/dom-testing-library/api-debugging.mdx b/docs/dom-testing-library/api-debugging.mdx index 75968f5d1..972a2d7d9 100644 --- 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 index 6f5b2a5f7..ca7cfc7a4 100644 --- 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 - - - -```sh +```bash npm2yarn npm install --save-dev @testing-library/user-event @testing-library/dom ``` - - - -```sh -yarn add --dev @testing-library/user-event @testing-library/dom -``` - - - - Now simply import it in your tests: ```js diff --git a/docs/user-event/install.mdx b/docs/user-event/install.mdx index db2be35f6..9e92a29b0 100644 --- 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' - - - - -```sh +```bash npm2yarn npm install --save-dev @testing-library/user-event ``` - - - -```sh -yarn add --dev @testing-library/user-event -``` - - - - Note that `@testing-library/user-event` requires `@testing-library/dom`. If you use one of the From d5babeec8e7521016ee79dd9d7a6d85a508a13aa Mon Sep 17 00:00:00 2001 From: Nick McCurdy Date: Thu, 2 Nov 2023 20:25:18 -0400 Subject: [PATCH 3/6] docs: use long options for consistency and readability --- docs/example-react-intl.mdx | 2 +- docs/marko-testing-library/api.mdx | 4 ++-- docs/marko-testing-library/setup.mdx | 2 +- docs/nightwatch-testing-library/intro.mdx | 2 +- docs/react-testing-library/setup.mdx | 4 ++-- docs/webdriverio-testing-library/intro.mdx | 2 +- 6 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/example-react-intl.mdx b/docs/example-react-intl.mdx index dc0bb5522..f9ea45597 100644 --- 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();` | 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 index 87188faf2..0a3e91044 100644 --- 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 index 1b6280b56..37b74e8dc 100644 --- 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 index dd93b7282..4a9ceaf69 100644 --- 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/react-testing-library/setup.mdx b/docs/react-testing-library/setup.mdx index 271b0e9a0..61ce15879 100644 --- 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/webdriverio-testing-library/intro.mdx b/docs/webdriverio-testing-library/intro.mdx index ab41ede9c..db760600b 100644 --- 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] From 4f157fd2b6f55255657049551d41b8ab917e4b0f Mon Sep 17 00:00:00 2001 From: Nick McCurdy Date: Fri, 3 Nov 2023 01:05:13 -0400 Subject: [PATCH 4/6] docs: remove remaining npm specific command --- docs/svelte-testing-library/setup.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/svelte-testing-library/setup.mdx b/docs/svelte-testing-library/setup.mdx index 2bfcb7f7c..a476db2c2 100644 --- a/docs/svelte-testing-library/setup.mdx +++ b/docs/svelte-testing-library/setup.mdx @@ -104,7 +104,7 @@ npm install --save-dev @vitest/ui { "scripts": { "test": "jest src", - "test:watch": "npm run test -- --watch" + "test:watch": "jest src --watch" } } ``` From ca6a633746db695dddfc76835d0493b2155b7434 Mon Sep 17 00:00:00 2001 From: Nick McCurdy Date: Fri, 3 Nov 2023 01:07:50 -0400 Subject: [PATCH 5/6] docs: shorten package manager commands --- docs/svelte-testing-library/setup.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/svelte-testing-library/setup.mdx b/docs/svelte-testing-library/setup.mdx index a476db2c2..cc02a7386 100644 --- a/docs/svelte-testing-library/setup.mdx +++ b/docs/svelte-testing-library/setup.mdx @@ -87,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 @@ -180,7 +180,7 @@ npm install --save-dev @vitest/ui and run it ```bash npm2yarn - npm run test + npm test ``` ### TypeScript From ed4dc4ac8a7bb92ed0d630bc82467297686e7835 Mon Sep 17 00:00:00 2001 From: Nick McCurdy Date: Fri, 3 Nov 2023 01:11:20 -0400 Subject: [PATCH 6/6] docs: split install commands for Reason packages This allows use to pick which install command to copy instead of both. --- docs/bs-react-testing-library/intro.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/bs-react-testing-library/intro.mdx b/docs/bs-react-testing-library/intro.mdx index fec630605..316ccc9b2 100644 --- 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 ```