From 61331d9592011a701b1120d2171a8253be2198fb Mon Sep 17 00:00:00 2001 From: Aislinn Hayes Date: Wed, 19 Mar 2025 11:36:30 +0000 Subject: [PATCH 1/2] Update intro.mdx to use named export for `userEvent` As per https://github.com/testing-library/user-event/discussions/1205 --- docs/user-event/intro.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/user-event/intro.mdx b/docs/user-event/intro.mdx index f4319fec1..e91083514 100644 --- a/docs/user-event/intro.mdx +++ b/docs/user-event/intro.mdx @@ -64,7 +64,7 @@ itself - e.g. in a `before`/`after` hook - for reasons described in ["Avoid Nesting When You're Testing"](https://kentcdodds.com/blog/avoid-nesting-when-youre-testing). ```js -import userEvent from '@testing-library/user-event' +import {userEvent} from '@testing-library/user-event' // inlining test('trigger some awesome feature when clicking the button', async () => { @@ -80,7 +80,7 @@ test('trigger some awesome feature when clicking the button', async () => { ``` ```js -import userEvent from '@testing-library/user-event' +import {userEvent} from '@testing-library/user-event' // setup function function setup(jsx) { From 1c354a2d2865c0f513e94e0e0abe36a532f21881 Mon Sep 17 00:00:00 2001 From: Aislinn Hayes Date: Wed, 19 Mar 2025 11:41:22 +0000 Subject: [PATCH 2/2] update everywhere else except v13 --- docs/example-findByText.md | 2 +- docs/example-formik.md | 2 +- docs/example-react-router.mdx | 4 ++-- docs/react-testing-library/example-intro.mdx | 4 ++-- docs/react-testing-library/migrate-from-enzyme.mdx | 2 +- docs/svelte-testing-library/example.mdx | 6 +++--- docs/user-event/setup.mdx | 2 +- 7 files changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/example-findByText.md b/docs/example-findByText.md index f2b02b2d6..9861982bd 100644 --- a/docs/example-findByText.md +++ b/docs/example-findByText.md @@ -9,7 +9,7 @@ title: Using findByText // is not visible right away import {screen} from '@testing-library/dom' -import userEvent from '@testing-library/user-event' +import {userEvent} from '@testing-library/user-event' // provides a set of custom jest matchers that you can use to extend jest // i.e. `.toBeVisible` import '@testing-library/jest-dom' diff --git a/docs/example-formik.md b/docs/example-formik.md index 4d2525b04..a3faed909 100644 --- a/docs/example-formik.md +++ b/docs/example-formik.md @@ -56,7 +56,7 @@ export const MyForm = ({onSubmit}) => { // myForm.test.js import React from 'react' import {render, screen, waitFor} from '@testing-library/react' -import userEvent from '@testing-library/user-event' +import {userEvent} from '@testing-library/user-event' import {MyForm} from './myForm.js' diff --git a/docs/example-react-router.mdx b/docs/example-react-router.mdx index 76875f88c..39830bc66 100644 --- a/docs/example-react-router.mdx +++ b/docs/example-react-router.mdx @@ -42,7 +42,7 @@ export const App = () => ( ```jsx // app.test.js import {render, screen} from '@testing-library/react' -import userEvent from '@testing-library/user-event' +import {userEvent} from '@testing-library/user-event' import React from 'react' import '@testing-library/jest-dom' import {App, LocationDisplay} from './app' @@ -175,7 +175,7 @@ so make sure you have the correct version of `history` installed. ```jsx // app.test.js import {render, screen} from '@testing-library/react' -import userEvent from '@testing-library/user-event' +import {userEvent} from '@testing-library/user-event' import {createMemoryHistory} from 'history' import React from 'react' import {Router} from 'react-router-dom' diff --git a/docs/react-testing-library/example-intro.mdx b/docs/react-testing-library/example-intro.mdx index 66722d223..04c5c6c28 100644 --- a/docs/react-testing-library/example-intro.mdx +++ b/docs/react-testing-library/example-intro.mdx @@ -13,7 +13,7 @@ what each line does, scroll down to the ```jsx import {render, screen} from '@testing-library/react' -import userEvent from '@testing-library/user-event' +import {userEvent} from '@testing-library/user-event' import '@testing-library/jest-dom' import Fetch from './fetch' @@ -38,7 +38,7 @@ test('loads and displays greeting', async () => { // import react-testing methods import {render, screen} from '@testing-library/react' // userEvent library simulates user interactions by dispatching the events that would happen if the interaction took place in a browser. -import userEvent from '@testing-library/user-event' +import {userEvent} from '@testing-library/user-event' // add custom jest matchers from jest-dom import '@testing-library/jest-dom' // the component to test diff --git a/docs/react-testing-library/migrate-from-enzyme.mdx b/docs/react-testing-library/migrate-from-enzyme.mdx index cf04d9298..110fbe023 100644 --- a/docs/react-testing-library/migrate-from-enzyme.mdx +++ b/docs/react-testing-library/migrate-from-enzyme.mdx @@ -303,7 +303,7 @@ npm install --save-dev @testing-library/user-event @testing-library/dom Now you can import it into your test: ```jsx -import userEvent from '@testing-library/user-event' +import {userEvent} from '@testing-library/user-event' ``` To demonstrate how to use the `user-event` library, imagine we have a `Checkbox` diff --git a/docs/svelte-testing-library/example.mdx b/docs/svelte-testing-library/example.mdx index 639e55d81..47a58b098 100644 --- a/docs/svelte-testing-library/example.mdx +++ b/docs/svelte-testing-library/example.mdx @@ -39,7 +39,7 @@ This basic example demonstrates how to: ```js title="greeter.test.js" import {render, screen} from '@testing-library/svelte' -import userEvent from '@testing-library/user-event' +import {userEvent} from '@testing-library/user-event' import {expect, test} from 'vitest' import Greeter from './greeter.svelte' @@ -94,7 +94,7 @@ Consider using function props to make testing events easier. ```js title="button.test.ts" import {render, screen} from '@testing-library/svelte' -import userEvent from '@testing-library/user-event' +import {userEvent} from '@testing-library/user-event' import {expect, test, vi} from 'vitest' import ButtonWithEvent from './button-with-event.svelte' @@ -200,7 +200,7 @@ binding itself. ```js title="text-input.test.js" import {render, screen} from '@testing-library/svelte' -import userEvent from '@testing-library/user-event' +import {userEvent} from '@testing-library/user-event' import {get, writable} from 'svelte/store' import {expect, test} from 'vitest' diff --git a/docs/user-event/setup.mdx b/docs/user-event/setup.mdx index ee43d0f44..c52f9b40f 100644 --- a/docs/user-event/setup.mdx +++ b/docs/user-event/setup.mdx @@ -27,7 +27,7 @@ This allows to write multiple consecutive interactions that behave just like the described interactions by a real user. ```js -import userEvent from '@testing-library/user-event' +import {userEvent} from '@testing-library/user-event' const user = userEvent.setup()