---
@@ -24,8 +31,31 @@
[![All Contributors][all-contributors-badge]](#contributors)
[![PRs Welcome][prs-badge]][prs]
[![Code of Conduct][coc-badge]][coc]
+
+[![Watch on GitHub][github-watch-badge]][github-watch]
+[![Star on GitHub][github-star-badge]][github-star]
+[![Tweet][twitter-badge]][twitter]
+## Table of Contents
+
+
+
+
+- [The problem](#the-problem)
+- [The solution](#the-solution)
+- [Installation](#installation)
+- [Docs](#docs)
+- [Known limitations](#known-limitations)
+- [Issues](#issues)
+ - [🐛 Bugs](#-bugs)
+ - [💡 Feature Requests](#-feature-requests)
+ - [❓ Questions](#-questions)
+- [Contributors](#contributors)
+- [LICENSE](#license)
+
+
+
## The problem
From
@@ -40,36 +70,8 @@ From
as the user interacts with it. For example `userEvent.click(checkbox)` would
change the state of the checkbox.
-**The library is still a work in progress and any help is appreciated.**
-
-## Table of Contents
-
-
-
-
-- [Installation](#installation)
-- [API](#api)
- - [`click(element, eventInit, options)`](#clickelement-eventinit-options)
- - [`dblClick(element, eventInit, options)`](#dblclickelement-eventinit-options)
- - [`type(element, text, [options])`](#typeelement-text-options)
- - [`keyboard(text, options)`](#keyboardtext-options)
- - [`upload(element, file, [{ clickInit, changeInit }], [options])`](#uploadelement-file--clickinit-changeinit--options)
- - [`clear(element)`](#clearelement)
- - [`selectOptions(element, values)`](#selectoptionselement-values)
- - [`deselectOptions(element, values)`](#deselectoptionselement-values)
- - [`tab({shift, focusTrap})`](#tabshift-focustrap)
- - [`hover(element)`](#hoverelement)
- - [`unhover(element)`](#unhoverelement)
- - [`paste(element, text, eventInit, options)`](#pasteelement-text-eventinit-options)
- - [`specialChars`](#specialchars)
-- [Known limitations](#known-limitations)
-- [Issues](#issues)
- - [🐛 Bugs](#-bugs)
- - [💡 Feature Requests](#-feature-requests)
-- [Contributors ✨](#contributors-)
-- [LICENSE](#license)
-
-
+> [The more your tests resemble the way your software is used, the more
+> confidence they can give you.][guiding-principle]
## Installation
@@ -85,551 +87,10 @@ With Yarn:
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'
-
-// or
-
-const {default: userEvent} = require('@testing-library/user-event')
-```
-
-## API
-
-Note: All userEvent methods are synchronous with one exception: when `delay`
-option used with `userEvent.type` as described below. We also discourage using
-`userEvent` inside `before/after` blocks at all, for important reasons described
-in
-["Avoid Nesting When You're Testing"](https://kentcdodds.com/blog/avoid-nesting-when-youre-testing).
-
-### `click(element, eventInit, options)`
-
-Clicks `element`, depending on what `element` is it can have different side
-effects.
-
-```jsx
-import React from 'react'
-import {render, screen} from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-
-test('click', () => {
- render(
-
-
-
-
,
- )
-
- userEvent.click(screen.getByText('Check'))
- expect(screen.getByLabelText('Check')).toBeChecked()
-})
-```
-
-You can also ctrlClick / shiftClick etc with
+## Docs
-```js
-userEvent.click(elem, {ctrlKey: true, shiftKey: true})
-```
-
-See the
-[`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent)
-constructor documentation for more options.
-
-Note that `click` will trigger hover events before clicking. To disable this,
-set the `skipHover` option to `true`. Also note that trying to click an element
-with `pointer-events` being set to `"none"` (i.e. unclickable) will throw an
-error.
-
-### `dblClick(element, eventInit, options)`
-
-Clicks `element` twice, depending on what `element` is it can have different
-side effects.
-
-```jsx
-import React from 'react'
-import {render, screen} from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-
-test('double click', () => {
- const onChange = jest.fn()
- render()
- const checkbox = screen.getByRole('checkbox')
- userEvent.dblClick(checkbox)
- expect(onChange).toHaveBeenCalledTimes(2)
- expect(checkbox).not.toBeChecked()
-})
-```
-
-### `type(element, text, [options])`
-
-Writes `text` inside an `` or a `