From da8074c6dd93a5d9c4e669c7f13038b304e989b7 Mon Sep 17 00:00:00 2001 From: Ben Limmer Date: Mon, 28 Jun 2021 20:46:46 -0600 Subject: [PATCH 001/455] docs(vue): update docs/faq for instantiated router --- docs/vue-testing-library/api.mdx | 5 ++-- docs/vue-testing-library/faq.mdx | 47 ++++++++++++++++++++++++++++++++ 2 files changed, 50 insertions(+), 2 deletions(-) diff --git a/docs/vue-testing-library/api.mdx b/docs/vue-testing-library/api.mdx index 1aa4dcd70..0b7daef43 100644 --- a/docs/vue-testing-library/api.mdx +++ b/docs/vue-testing-library/api.mdx @@ -71,10 +71,11 @@ The object definition of a [Vuex](https://vuex.vuejs.org/) store. If a `store` object is provided, `Vue Testing Library` will import and configure a Vuex store. -##### `routes` (`Array`) +##### `routes` (`Array` | `VueRouter`) A set of routes for [Vue Router](https://router.vuejs.org/). If `routes` is -provided, the library will import and configure Vue Router. +provided, the library will import and configure Vue Router. If an instantiated +Vue Router is passed, it will be used. ##### `props` (`Object`) diff --git a/docs/vue-testing-library/faq.mdx b/docs/vue-testing-library/faq.mdx index c33b5ef4c..b1788340c 100644 --- a/docs/vue-testing-library/faq.mdx +++ b/docs/vue-testing-library/faq.mdx @@ -80,6 +80,53 @@ expect(queryByText('submit')).not.toBeInTheDocument() +
+ Why does my Vue Router state seem to be shared between tests? + +By default, Vue Router uses +[`hash` routing mode](https://router.vuejs.org/api/#mode), which stores route +updates in `window.location`. Test runners, such as Jest, do not reset the JSDOM +environment in between test invocations, so route transitions from previous +tests can leak into subsequent tests, even though a new Vue Router is created +with each call to `render`. + +You can work around this in one of two ways: + +1. **Pass an instantiated router using `abstract` mode**. `abstract` mode does + not store route information on `window`, so transitions will not leak between + tests. For example: + +```js +import { render, fireEvent } from '@testing-library/vue' +import Component from './Component.vue' +import VueRouter from 'vue-router' + +test('uses abstract mode for the router', () => { + render(Component, { + routes: new VueRouter({ + mode: 'abstract', + routes: [ + // Your routes here + ], + }), + }) +}) +``` + +2. **Reset the window location `afterEach`**. If you don't want to pass an + instantiated Router, you can instead reset the `window.location` after each + test, like this: + +```js +afterEach(() => { + window.location.replace('http://localhost/') +}) +``` + +This will clear any route transitions stored in the `window` location property. + +
+ From f699619909cf02b0fa94ff685d1052bb8627a79f Mon Sep 17 00:00:00 2001 From: Ben Limmer Date: Mon, 28 Jun 2021 20:27:22 -0600 Subject: [PATCH 002/455] docs(vue): update docs for instantiated store --- docs/vue-testing-library/api.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/vue-testing-library/api.mdx b/docs/vue-testing-library/api.mdx index 1aa4dcd70..3bcb28beb 100644 --- a/docs/vue-testing-library/api.mdx +++ b/docs/vue-testing-library/api.mdx @@ -65,11 +65,11 @@ An object containing additional information to be passed to `@vue/test-utils` Additionally, the following options can also be provided: -##### `store` (`Object`) +##### `store` (`Object` | `Store`) The object definition of a [Vuex](https://vuex.vuejs.org/) store. If a `store` object is provided, `Vue Testing Library` will import and configure a Vuex -store. +store. If an instantiated Vuex store is passed, it will be used. ##### `routes` (`Array`) From d311fa45a530ea19a924db7df43294c86e394a9f Mon Sep 17 00:00:00 2001 From: JiangBei Date: Tue, 29 Jun 2021 19:24:34 +0800 Subject: [PATCH 003/455] Issues 877 --- docs/vue-testing-library/intro.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/vue-testing-library/intro.mdx b/docs/vue-testing-library/intro.mdx index ac548f36f..9fda66860 100644 --- a/docs/vue-testing-library/intro.mdx +++ b/docs/vue-testing-library/intro.mdx @@ -26,7 +26,7 @@ npm install --save-dev @testing-library/vue You can now use all of `DOM Testing Library`'s `getBy`, `getAllBy`, `queryBy` and `queryAllBy` commands. See here the -[full list of queries](dom-testing-library/api-queries.mdx). +[full list of queries](https://testing-library.com/docs/queries/about). You may also be interested in installing `@testing-library/jest-dom` so you can use [the custom Jest matchers](https://github.com/testing-library/jest-dom#readme) for the From 9a28562128760e476290f0fed62c156524c274a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Tue, 29 Jun 2021 20:26:24 +0200 Subject: [PATCH 004/455] Update docs/vue-testing-library/intro.mdx Co-authored-by: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> --- docs/vue-testing-library/intro.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/vue-testing-library/intro.mdx b/docs/vue-testing-library/intro.mdx index 9fda66860..19f29e8c3 100644 --- a/docs/vue-testing-library/intro.mdx +++ b/docs/vue-testing-library/intro.mdx @@ -26,7 +26,7 @@ npm install --save-dev @testing-library/vue You can now use all of `DOM Testing Library`'s `getBy`, `getAllBy`, `queryBy` and `queryAllBy` commands. See here the -[full list of queries](https://testing-library.com/docs/queries/about). +[full list of queries](docs/queries/about/#types-of-queries). You may also be interested in installing `@testing-library/jest-dom` so you can use [the custom Jest matchers](https://github.com/testing-library/jest-dom#readme) for the From 25f6c2cde5198e3f4186e13bbf6c155fd9b1d998 Mon Sep 17 00:00:00 2001 From: Dominik Broj <19861998+thetric@users.noreply.github.com> Date: Wed, 30 Jun 2021 09:51:30 +0200 Subject: [PATCH 005/455] docs(ecosystem/eslint): update link for the ESLint plugin (#879) The ESLint plugin has moved to https://github.com/testing-library/eslint-plugin-testing-library --- docs/ecosystem-eslint-plugin-testing-library.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ecosystem-eslint-plugin-testing-library.mdx b/docs/ecosystem-eslint-plugin-testing-library.mdx index 63ca6d5de..0b69bd33b 100644 --- a/docs/ecosystem-eslint-plugin-testing-library.mdx +++ b/docs/ecosystem-eslint-plugin-testing-library.mdx @@ -20,4 +20,4 @@ Find more info about available rules and configs on GitHub. - [eslint-plugin-testing-library on GitHub][gh] -[gh]: https://github.com/Belco90/eslint-plugin-testing-library +[gh]: https://github.com/testing-library/eslint-plugin-testing-library From abb4d0267c1440409b40d7d5e0dd6657012f3388 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Wed, 30 Jun 2021 10:42:08 +0200 Subject: [PATCH 006/455] docs: add thetric as a contributor for doc (#880) Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com> --- .all-contributorsrc | 9 +++++++++ README.md | 1 + 2 files changed, 10 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index fe8b3c805..904b79fa1 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1492,6 +1492,15 @@ "contributions": [ "doc" ] + }, + { + "login": "thetric", + "name": "Dominik Broj", + "avatar_url": "https://avatars.githubusercontent.com/u/19861998?v=4", + "profile": "https://github.com/thetric", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index 6bbf1f884..d76e9db54 100644 --- a/README.md +++ b/README.md @@ -343,6 +343,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
Dylan Piercey
πŸ“–
Ruhollah
πŸ“–
Michael Gwynne
πŸ“– +
Dominik Broj
πŸ“– From 0efe176173ab2e0d1a560924b2ff7a5c06b26e24 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 30 Jun 2021 14:00:38 +0200 Subject: [PATCH 007/455] Revert "Update example-formik.md (#692)" (#876) This reverts commit e8524e8f30fc5af7a586ec6b3fa1ed8c9ab62f88. --- docs/example-formik.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/example-formik.md b/docs/example-formik.md index ff5a6119e..9e45d0d9f 100644 --- a/docs/example-formik.md +++ b/docs/example-formik.md @@ -75,7 +75,7 @@ test('rendering and submitting a basic Formik form', async () => { email: 'john.dee@someemail.com', firstName: 'John', lastName: 'Dee', - }, expect.anything()) + }) ) }) ``` From 7579b2332bb3c92c274372badd2d617410c038ad Mon Sep 17 00:00:00 2001 From: Ben Limmer Date: Wed, 30 Jun 2021 09:16:53 -0600 Subject: [PATCH 008/455] docs(vue): update faq for Vue Router abstract mode --- docs/vue-testing-library/faq.mdx | 66 +++++++++++++++++++++----------- 1 file changed, 44 insertions(+), 22 deletions(-) diff --git a/docs/vue-testing-library/faq.mdx b/docs/vue-testing-library/faq.mdx index b1788340c..21593567d 100644 --- a/docs/vue-testing-library/faq.mdx +++ b/docs/vue-testing-library/faq.mdx @@ -90,40 +90,62 @@ environment in between test invocations, so route transitions from previous tests can leak into subsequent tests, even though a new Vue Router is created with each call to `render`. -You can work around this in one of two ways: - -1. **Pass an instantiated router using `abstract` mode**. `abstract` mode does - not store route information on `window`, so transitions will not leak between - tests. For example: +To work around this issue, pass an instantiated router using `abstract` mode. +`abstract` mode does not store route information on the JSDOM `window`, so +routing information will not leak between tests. For example: ```js -import { render, fireEvent } from '@testing-library/vue' +import { render } from '@testing-library/vue' import Component from './Component.vue' import VueRouter from 'vue-router' -test('uses abstract mode for the router', () => { - render(Component, { - routes: new VueRouter({ - mode: 'abstract', - routes: [ - // Your routes here - ], - }), +test('uses abstract mode for the router', async () => { + const router = new VueRouter({ + mode: 'abstract', + routes: [ + // Your routes here + ], + }) + + const renderResult = render(Component, { + routes: router, }) + + // Unlike the router in `hash` mode, the initial routing stack is empty. So, + // you need to push an initial route to the stack. + await router.push('/') }) ``` -2. **Reset the window location `afterEach`**. If you don't want to pass an - instantiated Router, you can instead reset the `window.location` after each - test, like this: +To reduce boilerplate, you can create a custom render function to use throughout +your test suite. For example: ```js -afterEach(() => { - window.location.replace('http://localhost/') -}) -``` +// test-utils.js -This will clear any route transitions stored in the `window` location property. +import { render } from '@testing-library/vue' +import VueRouter from 'vue-router' + +export async function renderApp(component, options) { + const router = new VueRouter({ + mode: 'abstract', + routes: [ + // Your routes here + ], + }) + + const renderResult = render(component, { + routes: router, + ...options, + }) + + // Unlike the router in `hash` mode, the initial routing stack is empty. So, + // you need to push an initial route to the stack. + await router.push('/') + + return renderResult +} +``` From a0e9eb29ba101b045fb6075aed17b579dae921d8 Mon Sep 17 00:00:00 2001 From: Stephen Wade Date: Sun, 4 Jul 2021 04:35:37 -0400 Subject: [PATCH 009/455] docs: Fix link to the `on-change.js` example (#884) --- docs/react-testing-library/faq.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react-testing-library/faq.mdx b/docs/react-testing-library/faq.mdx index 06cc58882..368544f80 100644 --- a/docs/react-testing-library/faq.mdx +++ b/docs/react-testing-library/faq.mdx @@ -11,7 +11,7 @@ to React testing How do I test input onChange handlers? TL;DR: -[Go to the `on-change.js` example](https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples/tree/master/?module=%2Fsrc%2F__tests__%2Fon-change.js&previewwindow=tests) +[Go to the `on-change.js` example](https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples/tree/main/?module=%2Fsrc%2F__tests__%2Fon-change.js&previewwindow=tests) In summary: From e6ef8e40edd9f03a831a765a45c64913ce64f520 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Sun, 4 Jul 2021 10:37:48 +0200 Subject: [PATCH 010/455] docs: add stephenwade as a contributor for doc (#885) Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com> --- .all-contributorsrc | 9 +++++++++ README.md | 1 + 2 files changed, 10 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index 904b79fa1..4ad2e0437 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1501,6 +1501,15 @@ "contributions": [ "doc" ] + }, + { + "login": "stephenwade", + "name": "Stephen Wade", + "avatar_url": "https://avatars.githubusercontent.com/u/4148577?v=4", + "profile": "https://github.com/stephenwade", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index d76e9db54..a5b3f6ef2 100644 --- a/README.md +++ b/README.md @@ -344,6 +344,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
Ruhollah
πŸ“–
Michael Gwynne
πŸ“–
Dominik Broj
πŸ“– +
Stephen Wade
πŸ“– From e596b0530f8fcd7d902b41440cd8302ce2821efc Mon Sep 17 00:00:00 2001 From: Liad Shiran Date: Tue, 6 Jul 2021 11:11:02 +0300 Subject: [PATCH 011/455] feat: more tsx tabs in RTL setup doc (#828) * feat: more tsx tabs in RTL setup doc * fix: import types + remove ts commonjs example * fix: remove redundant Omit type import * fix: omit wrapper instead of queries --- docs/react-testing-library/setup.mdx | 32 +++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/docs/react-testing-library/setup.mdx b/docs/react-testing-library/setup.mdx index d9669bf97..138789de6 100644 --- a/docs/react-testing-library/setup.mdx +++ b/docs/react-testing-library/setup.mdx @@ -96,11 +96,10 @@ const AllTheProviders: FC = ({ children }) => { const customRender = ( ui: ReactElement, - options?: Omit + options?: Omit ) => render(ui, { wrapper: AllTheProviders, ...options }) export * from '@testing-library/react' - export { customRender as render } ``` @@ -194,7 +193,12 @@ passing a [`queries`](api.mdx#render-options) option. If you want to add custom queries globally, you can do this by defining a custom render method: -```js title="test-utils.js" + + + + +```jsx title="test-utils.js" // test-utils.js import { render, queries } from '@testing-library/react' import * as customQueries from './custom-queries' @@ -209,6 +213,28 @@ export * from '@testing-library/react' export { customRender as render } ``` + + + + +```tsx title="test-utils.ts" +// test-utils.ts +import { render, queries, RenderOptions } from '@testing-library/react' +import * as customQueries from './custom-queries' +import { ReactElement } from 'react' + +const customRender = ( + ui: ReactElement, + options?: Omit +) => render(ui, { queries: { ...queries, ...customQueries }, ...options }) + +export * from '@testing-library/react' +export { customRender as render } +``` + + + + You can then use your custom queries as you would any other query: ```js From 9767005a5fb9bb6be62a184442da5d6d72a57b75 Mon Sep 17 00:00:00 2001 From: Luiz Baldi Date: Mon, 12 Jul 2021 03:40:53 -0300 Subject: [PATCH 012/455] Add .keyboard method to user-event page (#850) --- docs/ecosystem-user-event.mdx | 70 +++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) diff --git a/docs/ecosystem-user-event.mdx b/docs/ecosystem-user-event.mdx index 7d449a79d..716cef373 100644 --- a/docs/ecosystem-user-event.mdx +++ b/docs/ecosystem-user-event.mdx @@ -204,6 +204,76 @@ test('types into the input', () => { }) ``` +### `keyboard(text, options)` + +Simulates the keyboard events described by `text`. This is similar to +`userEvent.type()` but without any clicking or changing the selection range. + +> You should use `userEvent.keyboard` if you want to just simulate pressing +> buttons on the keyboard. You should use `userEvent.type` if you just want to +> conveniently insert some text into an input field or textarea. + +Keystrokes can be described: + +- Per printable character + ```js + userEvent.keyboard('foo') // translates to: f, o, o + ``` + The brackets `{` and `[` are used as special character and can be referenced + by doubling them. + ```js + userEvent.keyboard('{{a[[') // translates to: {, a, [ + ``` +- Per + [KeyboardEvent.key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) + (only supports alphanumeric values of `key`) + ```js + userEvent.keyboard('{Shift}{f}{o}{o}') // translates to: Shift, f, o, o + ``` + This does not keep any key pressed. So `Shift` will be lifted before pressing + `f`. +- Per + [KeyboardEvent.code](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code) + ```js + userEvent.keyboard('[ShiftLeft][KeyF][KeyO][KeyO]') // translates to: Shift, f, o, o + ``` +- Per legacy `userEvent.type` modifier/specialChar The modifiers like `{shift}` + (note the lowercase) will automatically be kept pressed, just like before. You + can cancel this behavior by adding a `/` to the end of the descriptor. + ```js + userEvent.keyboard('{shift}{ctrl/}a{/shift}') // translates to: Shift(down), Control(down+up), a, Shift(up) + ``` + +Keys can be kept pressed by adding a `>` to the end of the descriptor - and +lifted by adding a `/` to the beginning of the descriptor: + +```js +userEvent.keyboard('{Shift>}A{/Shift}') // translates to: Shift(down), A, Shift(up) +``` + +`userEvent.keyboard` returns a keyboard state that can be used to continue +keyboard operations. + +```js +const keyboardState = userEvent.keyboard('[ControlLeft>]') // keydown [ControlLeft] +// ... inspect some changes ... +userEvent.keyboard('a', { keyboardState }) // press [KeyA] with active ctrlKey modifier +``` + +The mapping of `key` to `code` is performed by a +[default key map](https://github.com/testing-library/user-event/blob/master/src/keyboard/keyMap.ts) +portraying a "default" US-keyboard. You can provide your own local keyboard +mapping per option. + +```js +userEvent.keyboard('?', { keyboardMap: myOwnLocaleKeyboardMap }) +``` + +> Future versions might try to interpolate the modifiers needed to reach a +> printable key on the keyboard. E.g. Automatically pressing `{Shift}` when +> CapsLock is not active and `A` is referenced. If you don't wish this behavior, +> you can pass `autoModify: false` when using `userEvent.keyboard` in your code. + ### `upload(element, file, [{ clickInit, changeInit }])` Uploads file to an ``. For uploading multiple files use `` with From adc3832bcf89d5c1e46535fe600797d338348acd Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Mon, 12 Jul 2021 08:49:46 +0200 Subject: [PATCH 013/455] docs: add luizbaldi as a contributor for doc (#886) Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com> --- .all-contributorsrc | 9 +++++++++ README.md | 1 + 2 files changed, 10 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index 4ad2e0437..e1115b286 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1510,6 +1510,15 @@ "contributions": [ "doc" ] + }, + { + "login": "luizbaldi", + "name": "Luiz Baldi", + "avatar_url": "https://avatars.githubusercontent.com/u/17226904?v=4", + "profile": "https://luizbaldi.com/", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index a5b3f6ef2..75a24f898 100644 --- a/README.md +++ b/README.md @@ -345,6 +345,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
Michael Gwynne
πŸ“–
Dominik Broj
πŸ“–
Stephen Wade
πŸ“– +
Luiz Baldi
πŸ“– From 11aa94c236c8895174e381cba29f1774c02af1eb Mon Sep 17 00:00:00 2001 From: itsik-avidan <48879394+itsik-avidan@users.noreply.github.com> Date: Tue, 13 Jul 2021 01:57:07 +0300 Subject: [PATCH 014/455] docs: add docs for intl componnets (#834) --- docs/example-react-intl.mdx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/docs/example-react-intl.mdx b/docs/example-react-intl.mdx index 79e6f3e36..0a56eb3d5 100644 --- a/docs/example-react-intl.mdx +++ b/docs/example-react-intl.mdx @@ -129,3 +129,16 @@ test('it should render FormattedDate and have a formatted pt date', () => { expect(screen.getByTestId('date-display')).toHaveTextContent('11/03/2019') }) ``` + +## Translated components testing stategy + +When testing a translated component there can be different approches for +achiving the wanted coverage, where the aimed goal should be to allow to test +the component in a way that will simulate the user behavior as much as posible. + +| Approach | Pros | Cons | +| ------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 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. | From 0db925f6a397518c18498d0b9e87c3a3c1b54361 Mon Sep 17 00:00:00 2001 From: Nick McCurdy Date: Sun, 18 Jul 2021 05:04:53 -0400 Subject: [PATCH 015/455] Add peer dependency to User Event docs (#888) --- docs/ecosystem-user-event.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/ecosystem-user-event.mdx b/docs/ecosystem-user-event.mdx index 716cef373..724dc97ad 100644 --- a/docs/ecosystem-user-event.mdx +++ b/docs/ecosystem-user-event.mdx @@ -12,7 +12,7 @@ advanced simulation of browser interactions than the built-in ## Install ``` -npm install --save-dev @testing-library/user-event +npm install --save-dev @testing-library/user-event @testing-library/dom ``` ```jsx From 38ba34f27cdb12f2d64869a6c0fd36d847dadb42 Mon Sep 17 00:00:00 2001 From: Thomas Ingram Date: Tue, 20 Jul 2021 20:57:15 -0400 Subject: [PATCH 016/455] docs: typo fix (#895) --- docs/react-testing-library/api.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react-testing-library/api.mdx b/docs/react-testing-library/api.mdx index 30b01cd0a..2df03da59 100644 --- a/docs/react-testing-library/api.mdx +++ b/docs/react-testing-library/api.mdx @@ -175,7 +175,7 @@ renders its HTML directly in the body. ### `debug` > NOTE: It's recommended to use -> [`screen.debug`](queries/about.mdx#api-queries#screendebug) instead. +> [`screen.debug`](queries/about.mdx#screendebug) instead. This method is a shortcut for `console.log(prettyDOM(baseElement))`. From 9ae3bf11d1f3a2880474f213824df5cc2ca1d878 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Tue, 20 Jul 2021 21:48:22 -0400 Subject: [PATCH 017/455] docs: add ravinggenius as a contributor for doc (#896) * docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com> --- .all-contributorsrc | 9 +++++++++ README.md | 1 + 2 files changed, 10 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index e1115b286..332cc608c 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1519,6 +1519,15 @@ "contributions": [ "doc" ] + }, + { + "login": "ravinggenius", + "name": "Thomas Ingram", + "avatar_url": "https://avatars.githubusercontent.com/u/21517?v=4", + "profile": "http://www.ravinggenius.com/", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index 75a24f898..7ce26e30f 100644 --- a/README.md +++ b/README.md @@ -346,6 +346,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
Dominik Broj
πŸ“–
Stephen Wade
πŸ“–
Luiz Baldi
πŸ“– +
Thomas Ingram
πŸ“– From af35066c2177d0e7f84f58db9be24e898ddc646c Mon Sep 17 00:00:00 2001 From: Nick McCurdy Date: Wed, 21 Jul 2021 18:25:56 -0400 Subject: [PATCH 018/455] docs: update docs for user-event from readme (#892) * docs: update API docs from user-event * docs: move install section to docs * docs: remove content already in readme * docs: add Tabs for user-event's installation --- docs/ecosystem-user-event.mdx | 75 ++++++++++++++++++++--------------- 1 file changed, 42 insertions(+), 33 deletions(-) diff --git a/docs/ecosystem-user-event.mdx b/docs/ecosystem-user-event.mdx index 724dc97ad..9972c7f55 100644 --- a/docs/ecosystem-user-event.mdx +++ b/docs/ecosystem-user-event.mdx @@ -3,28 +3,40 @@ id: ecosystem-user-event title: user-event --- +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. -[`user-event` on GitHub][gh] +## Installation -## Install + + -``` +```sh npm install --save-dev @testing-library/user-event @testing-library/dom ``` -```jsx -import { screen } from '@testing-library/dom' + + + +```sh +yarn add --dev @testing-library/user-event @testing-library/dom +``` + + + + +Now simply import it in your tests: + +```js import userEvent from '@testing-library/user-event' -test('types inside textarea', () => { - document.body.innerHTML = `