docs: Ecosystem library agnostic (#579)

* docs: make user-event docs library agnostic * docs: make jest-dom library agnostic * docs: update examples

Author: timdeschryver

docs/ecosystem-jest-dom.md

@@ -3,8 +3,8 @@ id: ecosystem-jest-dom
 title: jest-dom
 ---
 
-[`jest-dom`][gh] is a companion library for `React Testing Library` that
-provides custom DOM element matchers for Jest
+[`jest-dom`][gh] is a companion library for Testing Library that provides custom
+DOM element matchers for Jest
 
 ```
 npm install --save-dev @testing-library/jest-dom
@@ -14,11 +14,17 @@ Then follow [usage section][gh-usage] from jest-dom's documentation to add the
 matchers to Jest.
 
 ```jsx
-<span data-testid="not-empty"><span data-testid="empty"></span></span>
-<div data-testid="visible">Visible Example</div>
+import { screen } from '@testing-library/dom'
 
-expect(screen.queryByTestId('not-empty')).not.toBeEmptyDOMElement()
-expect(screen.getByText('Visible Example')).toBeVisible()
+test('uses jest-dom', () => {
+ document.body.innerHTML = `
+ <span data-testid="not-empty"><span data-testid="empty"></span></span>
+ <div data-testid="visible">Visible Example</div>
+ `
+
+ expect(screen.queryByTestId('not-empty')).not.toBeEmptyDOMElement()
+ expect(screen.getByText('Visible Example')).toBeVisible()
+})
 ```
 
 > Note: when using some of these matchers, you may need to make sure you use a

docs/ecosystem-user-event.md

@@ -3,24 +3,23 @@ id: ecosystem-user-event
 title: user-event
 ---
 
-[`user-event`][gh] is a companion library for `React Testing Library` that
-provides more advanced simulation of browser interactions than the built-in
-`fireEvent` method.
+[`user-event`][gh] is a companion library for Testing Library that provides more
+advanced simulation of browser interactions than the built-in `fireEvent`
+method.
 
 ```
 npm install --save-dev @testing-library/user-event
 ```
 
 ```jsx
-import React from 'react'
-import { render } from '@testing-library/react'
+import { screen } from '@testing-library/dom'
 import userEvent from '@testing-library/user-event'
 
-test('click', async () => {
- const { getByRole } = render(<textarea />)
+test('types inside textarea', async () => {
+ document.body.innerHTML = `<textarea />`
 
- await userEvent.type(getByRole('textbox'), 'Hello, World!')
- expect(getByRole('textbox')).toHaveValue('Hello, World!')
+ await userEvent.type(screen.getByRole('textbox'), 'Hello, World!')
+ expect(screen.getByRole('textbox')).toHaveValue('Hello, World!')
 })
 ```