[](https://travis-ci.org/testing-library/user-event)
[](https://codeclimate.com/github/testing-library/user-event/maintainability)
[](https://codeclimate.com/github/testing-library/user-event/test_coverage)
[](#contributors-)
## The problem
From
[testing-library/dom-testing-library#107](https://github.com/testing-library/dom-testing-library/issues/107):
> [...] it is becoming apparent the need to express user actions on a web page
> using a higher-level abstraction than `fireEvent`
## The solution
`user-event` tries to simulate the real events that would happen in the browser
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.**
## Installation
With NPM:
```sh
npm install @testing-library/user-event --save-dev
```
With Yarn:
```sh
yarn add @testing-library/user-event --dev
```
Now simply import it in your tests:
```js
import userEvent from "@testing-library/user-event";
// or
var userEvent = require("@testing-library/user-event");
```
## API
### `click(element)`
Clicks `element`, depending on what `element` is it can have different side
effects.
```jsx
import React from "react";
import { render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
test("click", () => {
const { getByText, getByTestId } = render(
);
userEvent.click(getByText("Check"));
expect(getByTestId("checkbox")).toHaveAttribute("checked", true);
});
```
### `dblClick(element)`
Clicks `element` twice, depending on what `element` is it can have different
side effects.
```jsx
import React from "react";
import { render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
test("double click", () => {
const onChange = jest.fn();
const { getByTestId } = render(
);
const checkbox = getByTestId("checkbox");
userEvent.dblClick(checkbox);
expect(onChange).toHaveBeenCalledTimes(2);
expect(checkbox).toHaveProperty("checked", false);
});
```
### `type(element, text, [options])`
Writes `text` inside an `` or a `
