diff --git a/.vscode/markdown.code-snippets b/.vscode/markdown.code-snippets index c1b2d4e7c..8df3257d7 100644 --- a/.vscode/markdown.code-snippets +++ b/.vscode/markdown.code-snippets @@ -27,7 +27,7 @@ "", "", "```js", - "import { $1 } from 'dom-testing-library'", + "import { $1 } from '@testing-library/dom'", "", "const container = document.body", "const $3 = $1(container, '$2')", @@ -35,7 +35,7 @@ "", "", "```js", - "import { render } from 'react-testing-library'", + "import { render } from '@testing-library/react'", "", "const { $1 } = render()", "const $3 = $1('$2')", @@ -50,4 +50,4 @@ ], "description": "Create a Docusaurus multi-language code block" } -} +} \ No newline at end of file diff --git a/README.md b/README.md index fd6f99701..6bc9b950c 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ testing-library-docs [![Code of Conduct][coc-badge]][coc] -Documentation site for [react-testing-library](https://github.com/testing-library/react-testing-library), [dom-testing-library](https://github.com/testing-library/dom-testing-library), and [related projects](https://github.com/testing-library) +Documentation site for [React Testing Library](https://github.com/testing-library/react-testing-library), [DOM Testing Library](https://github.com/testing-library/dom-testing-library), and [related projects](https://github.com/testing-library) See [./website/README.md](./website/README.md) for instructions on building the site diff --git a/docs/angular-testing-library/intro.md b/docs/angular-testing-library/intro.md index a35bcf1c5..7796a1e7d 100644 --- a/docs/angular-testing-library/intro.md +++ b/docs/angular-testing-library/intro.md @@ -76,7 +76,7 @@ after each interaction. You can also import these event via `@angular-extensions/testing-library`, but the Angular's change detection will not be triggered automatically. -The same counts for all the queries provided by `dom-testing-library`, these are +The same counts for all the queries provided by `DOM Testing Library`, these are also re-exported and can be imported via `@angular-extensions/testing-library`. ```typescript diff --git a/docs/bs-react-testing-library/intro.md b/docs/bs-react-testing-library/intro.md index 13a74fde1..8e2545423 100644 --- a/docs/bs-react-testing-library/intro.md +++ b/docs/bs-react-testing-library/intro.md @@ -8,10 +8,10 @@ Bindings for several testing libraries have been ported to [ReasonML][re]. [`bs-react-testing-library`][gh-react] contains [BuckleScript](https://bucklescript.github.io/) bindings for -`react-testing-library`. +`React Testing Library`. [`bs-dom-testing-library`][gh-dom] contains [BuckleScript][bs] bindings for -`dom-testing-library`. +`DOM Testing Library`. ``` npm install --save-dev bs-dom-testing-library diff --git a/docs/contributing.md b/docs/contributing.md index 41371fba9..d446eacbe 100644 --- a/docs/contributing.md +++ b/docs/contributing.md @@ -6,7 +6,7 @@ sidebar_label: Contributing ## License -`react-testing-library` is distributed under the open-source MIT license +`React Testing Library` is distributed under the open-source MIT license ## Issues diff --git a/docs/cypress-testing-library/intro.md b/docs/cypress-testing-library/intro.md index ac323871f..4fcf3da49 100644 --- a/docs/cypress-testing-library/intro.md +++ b/docs/cypress-testing-library/intro.md @@ -3,28 +3,28 @@ id: intro title: Cypress Testing Library --- -[`cypress-testing-library`][gh] allows the use of dom-testing queries within +[`Cypress Testing Library`][gh] allows the use of dom-testing queries within [Cypress](https://cypress.io) end-to-end browser tests. ``` -npm install --save-dev cypress cypress-testing-library +npm install --save-dev cypress @testing-library/cypress ``` -- [cypress-testing-library on GitHub][gh] +- [Cypress Testing Library on GitHub][gh] ## Usage -`cypress-testing-library` extends Cypress' `cy` command. +`Cypress Testing Library` extends Cypress' `cy` command. Add this line to your project's `cypress/support/commands.js`: ``` -import 'cypress-testing-library/add-commands'; +import '@testing-library/cypress/add-commands'; ``` -You can now use all of `dom-testing-library`'s `getBy`, `getAllBy`, `queryBy` +You can now use all of `DOM Testing Library`'s `getBy`, `getAllBy`, `queryBy` and `queryAllBy` commands. -[See `dom-testing-library` API for reference](dom-testing-library/api-queries.md) +[See `DOM Testing Library` API for reference](dom-testing-library/api-queries.md) ## Examples @@ -44,10 +44,10 @@ cy.get('form').then(subject => { }) ``` -`cypress-testing-library` supports both jQuery elements and DOM nodes. This is -necessary because Cypress uses jQuery elements, while `dom-testing-library` +`Cypress Testing Library` supports both jQuery elements and DOM nodes. This is +necessary because Cypress uses jQuery elements, while `DOM Testing Library` expects DOM nodes. When you pass a jQuery element as `container`, it will get the first DOM node from the collection and use that as the `container` parameter -for the `dom-testing-library` functions. +for the DOM Testing Library functions. [gh]: https://github.com/testing-library/cypress-testing-library diff --git a/docs/dom-testing-library/api-configuration.md b/docs/dom-testing-library/api-configuration.md index 893041401..33c27718f 100644 --- a/docs/dom-testing-library/api-configuration.md +++ b/docs/dom-testing-library/api-configuration.md @@ -28,7 +28,7 @@ Defaults to `data-testid`. See [`getByTestId`](#getbytestid). ```js // setup-tests.js -import { configure } from 'dom-testing-library' +import { configure } from '@testing-library/dom' configure({testIdAttribute: 'my-data-test-id'})` ``` @@ -37,7 +37,7 @@ configure({testIdAttribute: 'my-data-test-id'})` ```js // setup-tests.js -import { configure } from 'react-testing-library' +import { configure } from '@testing-library/react' configure({testIdAttribute: 'my-data-test-id'})` ``` diff --git a/docs/dom-testing-library/api-helpers.md b/docs/dom-testing-library/api-helpers.md index e98f5abcf..596d6494a 100644 --- a/docs/dom-testing-library/api-helpers.md +++ b/docs/dom-testing-library/api-helpers.md @@ -5,15 +5,15 @@ title: Helpers ## Custom Queries -`dom-testing-library` exposes many of the helper functions that are used to +`DOM Testing Library` exposes many of the helper functions that are used to implement the default queries. You can use the helpers to build custom queries. For example, the code below shows a way to override the default `testId` queries to use a different data-attribute. (Note: test files would import -`test-utils.js` instead of using `dom-testing-library` directly). +`test-utils.js` instead of using `DOM Testing Library` directly). ```js // test-utils.js -const domTestingLib = require('dom-testing-library') +const domTestingLib = require('@testing-library/dom') const { queryHelpers } = domTestingLib export const queryByTestId = queryHelpers.queryByAttribute.bind( @@ -52,7 +52,7 @@ module.exports = { > **Note** > -> Custom queries can be added to `react-testing-library`'s `render` method by +> Custom queries can be added to `React Testing Library`'s `render` method by > adding `queries` to the options config object. See the render > [options](/docs/react-testing-library/api#render-options). @@ -106,7 +106,7 @@ These elements use the attribute `value` and display its value to the user. `within` (an alias to `getQueriesForElement`) takes a DOM element and binds it to the raw query functions, allowing them to be used without specifying a container. It is the recommended approach for libraries built on this API and is -in use in `react-testing-library` and `vue-testing-library`. +in use in `React Testing Library` and `Vue Testing Library`. Example: To get the text 'hello' only within a section called 'messages', you could do: @@ -116,7 +116,7 @@ could do: ```js -import { within } from 'dom-testing-library' +import { within } from '@testing-library/dom' const { getByText } = within(document.getElementById('messages')) const helloMessage = getByText('hello') @@ -125,7 +125,7 @@ const helloMessage = getByText('hello') ```js -import { render, within } from 'react-testing-library' +import { render, within } from '@testing-library/react' const { getByLabelText } = render() const signinModal = getByLabelText('Sign In') diff --git a/docs/dom-testing-library/api-queries.md b/docs/dom-testing-library/api-queries.md index 024565a6f..6124a29e8 100644 --- a/docs/dom-testing-library/api-queries.md +++ b/docs/dom-testing-library/api-queries.md @@ -107,7 +107,7 @@ The example below will find the input node for the following DOM structures: ```javascript -import { getByLabelText } from 'dom-testing-library' +import { getByLabelText } from '@testing-library/dom' const container = document.body const inputNode = getByLabelText(container, 'Username') @@ -116,7 +116,7 @@ const inputNode = getByLabelText(container, 'Username') ```js -import { render } from 'react-testing-library' +import { render } from '@testing-library/react' const { getByLabelText } = render() @@ -172,7 +172,7 @@ matches the given [`TextMatch`](#textmatch). ```js -import { getByPlaceholderText } from 'dom-testing-library' +import { getByPlaceholderText } from '@testing-library/dom' const container = document.body const inputNode = getByPlaceholderText(container, 'Username') @@ -181,7 +181,7 @@ const inputNode = getByPlaceholderText(container, 'Username') ```js -import { render } from 'react-testing-library' +import { render } from '@testing-library/react' const { getByPlaceholderText } = render() const inputNode = getByPlaceholderText('Username') @@ -229,7 +229,7 @@ matching the given [`TextMatch`](#textmatch). ```js -import { getByText } from 'dom-testing-library' +import { getByText } from '@testing-library/dom' const container = document.body const aboutAnchorNode = getByText(container, /about/i) @@ -238,7 +238,7 @@ const aboutAnchorNode = getByText(container, /about/i) ```js -import { render } from 'react-testing-library' +import { render } from '@testing-library/react' const { getByText } = render() const aboutAnchorNode = getByText(/about/i) @@ -305,7 +305,7 @@ as it's deprecated). ```js -import { getByAltText } from 'dom-testing-library' +import { getByAltText } from '@testing-library/dom' const container = document.body const incrediblesPosterImg = getByAltText(container, /incredibles.*? poster/i) @@ -314,7 +314,7 @@ const incrediblesPosterImg = getByAltText(container, /incredibles.*? poster/i) ```js -import { render } from 'react-testing-library' +import { render } from '@testing-library/react' const { getByAltText } = render() const incrediblesPosterImg = getByAltText(/incredibles.*? poster/i) @@ -360,7 +360,7 @@ Will also find a `title` element within an SVG. ```js -import { getByTitle } from 'dom-testing-library' +import { getByTitle } from '@testing-library/dom' const container = document.body const deleteElement = getByTitle(container, 'Delete') @@ -370,7 +370,7 @@ const closeElement = getByTitle(container, 'Close') ```js -import { render } from 'react-testing-library' +import { render } from '@testing-library/react' const { getByTitle } = render() const deleteElement = getByTitle('Delete') @@ -419,7 +419,7 @@ document.getElementById('lastName').value = 'Norris' ```js -import { getByDisplayValue } from 'dom-testing-library' +import { getByDisplayValue } from '@testing-library/dom' const container = document.body const lastNameInput = getByDisplayValue(container, 'Norris') @@ -428,7 +428,7 @@ const lastNameInput = getByDisplayValue(container, 'Norris') ```js -import { render } from 'react-testing-library' +import { render } from '@testing-library/react' const { getByDisplayValue } = render() const lastNameInput = getByDisplayValue('Norris') @@ -457,7 +457,7 @@ document.getElementById('messageTextArea').value = 'Hello World' ```js -import { getByDisplayValue } from 'dom-testing-library' +import { getByDisplayValue } from '@testing-library/dom' const container = document.body const messageTextArea = getByDisplayValue(container, 'Hello World') @@ -466,7 +466,7 @@ const messageTextArea = getByDisplayValue(container, 'Hello World') ```js -import { render } from 'react-testing-library' +import { render } from '@testing-library/react' const { getByDisplayValue } = render() const messageTextArea = getByDisplayValue('Hello World') @@ -499,7 +499,7 @@ matches the given [`TextMatch`](#textmatch). ```js -import { getByDisplayValue } from 'dom-testing-library' +import { getByDisplayValue } from '@testing-library/dom' const container = document.body const selectElement = getByDisplayValue(container, 'Alaska') @@ -508,7 +508,7 @@ const selectElement = getByDisplayValue(container, 'Alaska') ```js -import { render } from 'react-testing-library' +import { render } from '@testing-library/react' const { getByDisplayValue } = render() const selectElement = getByDisplayValue('Alaska') @@ -549,7 +549,7 @@ accepts a [`TextMatch`](#textmatch)). ```js -import { getByRole } from 'dom-testing-library' +import { getByRole } from '@testing-library/dom' const container = document.body const dialogContainer = getByRole(container, 'dialog') @@ -558,7 +558,7 @@ const dialogContainer = getByRole(container, 'dialog') ```js -import { render } from 'react-testing-library' +import { render } from '@testing-library/react' const { getByRole } = render() const dialogContainer = getByRole('dialog') @@ -599,7 +599,7 @@ also accepts a [`TextMatch`](#textmatch)). ```js -import { getByTestId } from 'dom-testing-library' +import { getByTestId } from '@testing-library/dom' const container = document.body const usernameInput = getByTestId(container, 'username-input') @@ -608,7 +608,7 @@ const usernameInput = getByTestId(container, 'username-input') ```js -import { render } from 'react-testing-library' +import { render } from '@testing-library/react' const { getByTestId } = render() const usernameInput = getByTestId('username-input') @@ -632,7 +632,7 @@ cy.getByTestId('username-input').should('exist') #### Overriding `data-testid` -The `...ByTestId` functions in `dom-testing-library` use the attribute +The `...ByTestId` functions in `DOM Testing Library` use the attribute `data-testid` by default, following the precedent set by [React Native Web](https://github.com/testing-library/react-testing-library/issues/1) which uses a `testID` prop to emit a `data-testid` attribute on the element, and @@ -661,7 +661,7 @@ affect the precision of string matching: ### Normalization -Before running any matching logic against text in the DOM, `dom-testing-library` +Before running any matching logic against text in the DOM, `DOM Testing Library` automatically normalizes that text. By default, normalization consists of trimming whitespace from the start and end of text, and collapsing multiple adjacent whitespace characters into a single space. diff --git a/docs/dom-testing-library/cheatsheet.md b/docs/dom-testing-library/cheatsheet.md index bc046c850..2a93767ac 100644 --- a/docs/dom-testing-library/cheatsheet.md +++ b/docs/dom-testing-library/cheatsheet.md @@ -3,7 +3,7 @@ id: cheatsheet title: Cheatsheet --- -A short guide to all the exported functions in `dom-testing-library` +A short guide to all the exported functions in `DOM Testing Library` ## Queries @@ -98,7 +98,7 @@ See [Events API](api-events.md) See [Helpers API](api-helpers.md), [Config API](api-configuration.md) - **within** take a node and return an object with all the queries bound to the - node (used to return the queries from `react-testing-library`'s render + node (used to return the queries from `React Testing Library`'s render method): `within(node).getByText("hello")` - **configure** change global options: `configure({testIdAttribute: 'my-data-test-id'})` diff --git a/docs/dom-testing-library/example-intro.md b/docs/dom-testing-library/example-intro.md index 65cdd92f4..d60e89f3d 100644 --- a/docs/dom-testing-library/example-intro.md +++ b/docs/dom-testing-library/example-intro.md @@ -15,7 +15,7 @@ import { // Tip: all queries are also exposed on an object // called "queries" which you could import here as well wait, -} from 'dom-testing-library' +} from '@testing-library/dom' // adds special assertions like toHaveTextContent import 'jest-dom/extend-expect' diff --git a/docs/dom-testing-library/install.md b/docs/dom-testing-library/install.md index 055e3b434..8f85db926 100644 --- a/docs/dom-testing-library/install.md +++ b/docs/dom-testing-library/install.md @@ -8,7 +8,7 @@ This module is distributed via [npm][npm] which is bundled with [node][node] and should be installed as one of your project's `devDependencies`: ``` -npm install --save-dev dom-testing-library +npm install --save-dev @testing-library/dom ``` ## Wrappers @@ -21,7 +21,7 @@ wrapper: ## Ecosystem -`dom-testing-library` works well with these companion libraries: +`DOM Testing Library` works well with these companion libraries: - [user-event](ecosystem-user-event.md) browser event simulation - [jest-dom](ecosystem-jest-dom.md) custom Jest matchers @@ -29,21 +29,21 @@ wrapper: ## Main Exports You can -[review the `dom-testing-library` package.json here](https://unpkg.com/dom-testing-library/package.json). +[review the `DOM Testing Library` package.json here](https://unpkg.com/@testing-library/dom/package.json). In particular, the `main`, `module`, and `umd:main` fields are useful. Each of these points to a file that's useful in certain situations. Typically, your testing framework will resolve to the correct one for your situation, but if it does not, then you can either configure your testing framework to resolve to the -right file when you require/import `dom-testing-library` or you can import the +right file when you require/import `@testing-library/dom` or you can import the file you need more explicitly. For example: ```js -import { within } from 'dom-testing-library/dist/dom-testing-library.umd.js' +import { within } from '@testing-library/dom/dist/@testing-library/dom.umd.js' ``` You can -[review the published `dist` files here](https://unpkg.com/dom-testing-library/dist). +[review the published `dist` files here](https://unpkg.com/@testing-library/dom/dist/). The `main` file is configured to compile down to support the version of node that is referenced in the `package.json` `engines.node` field. But the `module` diff --git a/docs/dom-testing-library/intro.md b/docs/dom-testing-library/intro.md index e96b74e8b..1cbd1b66a 100644 --- a/docs/dom-testing-library/intro.md +++ b/docs/dom-testing-library/intro.md @@ -14,12 +14,12 @@ functionality) don't break your tests and slow you and your team down. ## This solution -The `dom-testing-library` is a very light-weight solution for testing DOM nodes +The `DOM Testing Library` is a very light-weight solution for testing DOM nodes (whether simulated with [`JSDOM`](https://github.com/jsdom/jsdom) as provided by default with [Jest][jest] or in the browser). The main utilities it provides involve querying the DOM for nodes in a way that's similar to how the user finds elements on the page. In this way, the library helps ensure your tests give you -confidence in your UI code. The `dom-testing-library`'s primary guiding +confidence in your UI code. The `DOM Testing Library`'s primary guiding principle is: > [The more your tests resemble the way your software is used, the more confidence they can give you.](guiding-principles.md) diff --git a/docs/dom-testing-library/setup.md b/docs/dom-testing-library/setup.md index 7e1a7b31d..fa4263359 100644 --- a/docs/dom-testing-library/setup.md +++ b/docs/dom-testing-library/setup.md @@ -5,8 +5,8 @@ sidebar_label: Setup --- If you're running your tests in the browser bundled with webpack (or similar) -then `dom-testing-library` should work out of the box for you. However, most -people using `dom-testing-library` are using it with +then `DOM Testing Library` should work out of the box for you. However, most +people using `DOM Testing Library` are using it with [the Jest testing framework](https://jestjs.io/) with the `testEnvironment` set to [`jest-environment-jsdom`](https://www.npmjs.com/package/jest-environment-jsdom) diff --git a/docs/ecosystem-jest-dom.md b/docs/ecosystem-jest-dom.md index 6d482671a..9f5b16367 100644 --- a/docs/ecosystem-jest-dom.md +++ b/docs/ecosystem-jest-dom.md @@ -3,7 +3,7 @@ id: ecosystem-jest-dom title: jest-dom --- -[`jest-dom`][gh] is a companion library for `react-testing-library` that +[`jest-dom`][gh] is a companion library for `React Testing Library` that provides custom DOM element matchers for Jest ``` diff --git a/docs/ecosystem-jest-native.md b/docs/ecosystem-jest-native.md index 50023f040..a21c8d48c 100644 --- a/docs/ecosystem-jest-native.md +++ b/docs/ecosystem-jest-native.md @@ -4,12 +4,12 @@ title: jest-native sidebar_label: jest-native --- -[`jest-native`](https://github.com/testing-library/jest-native) is a companion -library for `native-testing-library` that provides custom element matchers for +[`Jest Native`](https://github.com/testing-library/jest-native) is a companion +library for `Native Testing Library` that provides custom element matchers for Jest. ``` -npm install --save-dev jest-native +npm install --save-dev @testing-library/jest-native ``` ```javascript @@ -30,7 +30,7 @@ expect(getByText(baseElement, 'Visible Example')).toBeVisible() > assertion. Check out -[jest-native's documentation](https://github.com/testing-library/jest-native) +[Jest Native's documentation](https://github.com/testing-library/jest-native) for a full list of available matchers. -- [jest-native on GitHub](https://github.com/testing-library/jest-native) +- [Jest Native on GitHub](https://github.com/testing-library/jest-native) diff --git a/docs/ecosystem-native-testing-library.md b/docs/ecosystem-native-testing-library.md index 5fd0d51d6..6e3a2fdcb 100644 --- a/docs/ecosystem-native-testing-library.md +++ b/docs/ecosystem-native-testing-library.md @@ -5,9 +5,9 @@ sidebar_label: native-testing-library --- Native Testing Library is a testing library for **React Native** inspired by -`dom-testing-library`. Because React Native does not run in a browser +`DOM Testing Library`. Because React Native does not run in a browser environment, the core queries are implemented independently, unlike other -wrappers that user dom-testing-library as the base. You'll find much more +wrappers that use `DOM Testing Library` as the base. You'll find much more information about the library, including examples, on the project website: - [Docs](https://native-testing-library.com) @@ -19,7 +19,7 @@ information about the library, including examples, on the project website: This module should be installed in your project's `devDependencies`: ``` -npm --save-dev native-testing-library +npm --save-dev @testing-library/react-native ``` You will also need `react` and `react-native` installed as `dependencies` in @@ -30,7 +30,7 @@ order to use this project. ```javascript import React from 'react' import { Button, Text, TextInput, View } from 'react-native' -import { fireEvent, render, wait } from 'native-testing-library' +import { fireEvent, render, wait } from '@testing-library/react-native' function Example() { const [name, setUser] = React.useState('') diff --git a/docs/ecosystem-react-select-event.md b/docs/ecosystem-react-select-event.md index dbbd47f96..c3cbe39a0 100644 --- a/docs/ecosystem-react-select-event.md +++ b/docs/ecosystem-react-select-event.md @@ -3,7 +3,7 @@ id: ecosystem-react-select-event title: react-select-event --- -[`react-select-event`][gh] is a companion library for `react-testing-library` +[`react-select-event`][gh] is a companion library for `React Testing Library` that provides helper methods for interacting with [`react-select`][react-select] elements. @@ -14,7 +14,7 @@ npm install --save-dev react-select-event ```jsx import React from 'react' import Select from 'react-select' -import { render } from 'react-testing-library' +import { render } from '@testing-library/react' import selectEvent from 'react-select-event' const { getByTestId, getByLabelText } = render( diff --git a/docs/ecosystem-user-event.md b/docs/ecosystem-user-event.md index e77012993..e2efed50a 100644 --- a/docs/ecosystem-user-event.md +++ b/docs/ecosystem-user-event.md @@ -3,7 +3,7 @@ id: ecosystem-user-event title: user-event --- -[`user-event`][gh] is a companion library for `react-testing-library` that +[`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. @@ -13,7 +13,7 @@ npm install --save-dev user-event ```jsx import React from 'react' -import { render } from 'react-testing-library' +import { render } from '@testing-library/react' import userEvent from 'user-event' const { getByText } = test('click', () => { diff --git a/docs/example-external.md b/docs/example-external.md index 580439b1d..fa4b369d8 100644 --- a/docs/example-external.md +++ b/docs/example-external.md @@ -6,7 +6,7 @@ sidebar_label: External Examples ## Code Samples -- You can find more react-testing-library examples at +- You can find more React Testing Library examples at [react-testing-examples.com](https://react-testing-examples.com/jest-rtl/). ## Videos diff --git a/docs/example-input-event.md b/docs/example-input-event.md index 87aadbe6e..5d25ee3e9 100644 --- a/docs/example-input-event.md +++ b/docs/example-input-event.md @@ -12,7 +12,7 @@ sidebar_label: Input Event ```jsx import React from 'react' -import { render, fireEvent, cleanup } from 'react-testing-library' +import { render, fireEvent, cleanup } from '@testing-library/react' class CostInput extends React.Component { state = { diff --git a/docs/example-reach-router.md b/docs/example-reach-router.md index 2a1a148b0..448d83bad 100644 --- a/docs/example-reach-router.md +++ b/docs/example-reach-router.md @@ -5,7 +5,7 @@ title: Reach Router ```jsx import React from 'react' -import { render, cleanup } from 'react-testing-library' +import { render, cleanup } from '@testing-library/react' import { Router, Link, diff --git a/docs/example-react-context.md b/docs/example-react-context.md index 18e6bda45..f215b5f2b 100644 --- a/docs/example-react-context.md +++ b/docs/example-react-context.md @@ -5,7 +5,7 @@ title: React Context ```jsx import React from 'react' -import { render, cleanup } from 'react-testing-library' +import { render, cleanup } from '@testing-library/react' import 'jest-dom/extend-expect' import { NameContext, NameProvider, NameConsumer } from '../react-context' diff --git a/docs/example-react-intl.md b/docs/example-react-intl.md index 4f53cbac3..40a5eb2ec 100644 --- a/docs/example-react-intl.md +++ b/docs/example-react-intl.md @@ -39,7 +39,7 @@ A complete example: ```jsx import React from 'react' import 'jest-dom/extend-expect' -import { render, cleanup, getByTestId } from 'react-testing-library' +import { render, cleanup, getByTestId } from '@testing-library/react' import { IntlProvider, FormattedDate } from 'react-intl' import IntlPolyfill from 'intl' import 'intl/locale-data/jsonp/pt' diff --git a/docs/example-react-redux.md b/docs/example-react-redux.md index 3d50a584d..f5ff77c15 100644 --- a/docs/example-react-redux.md +++ b/docs/example-react-redux.md @@ -7,7 +7,7 @@ title: React Redux import React from 'react' import { createStore } from 'redux' import { Provider, connect } from 'react-redux' -import { render, fireEvent, cleanup } from 'react-testing-library' +import { render, fireEvent, cleanup } from '@testing-library/react' // counter.js class Counter extends React.Component { diff --git a/docs/example-react-router.md b/docs/example-react-router.md index a39e57495..85e8e5431 100644 --- a/docs/example-react-router.md +++ b/docs/example-react-router.md @@ -8,7 +8,7 @@ import React from 'react' import { withRouter } from 'react-router' import { Link, Route, Router, Switch } from 'react-router-dom' import { createMemoryHistory } from 'history' -import { render, fireEvent, cleanup } from 'react-testing-library' +import { render, fireEvent, cleanup } from '@testing-library/react' const About = () =>
You are on the about page
const Home = () =>
You are home
diff --git a/docs/example-react-transition-group.md b/docs/example-react-transition-group.md index 7a60d2766..6b9773158 100644 --- a/docs/example-react-transition-group.md +++ b/docs/example-react-transition-group.md @@ -8,7 +8,7 @@ title: React Transition Group ```jsx import React from 'react' import { CSSTransition } from 'react-transition-group' -import { render, fireEvent, cleanup } from 'react-testing-library' +import { render, fireEvent, cleanup } from '@testing-library/react' function Fade({ children, ...props }) { return ( @@ -64,7 +64,7 @@ test('you can mock things with jest.mock', () => { ```jsx import React from 'react' import { CSSTransition } from 'react-transition-group' -import { render, fireEvent, cleanup } from 'react-testing-library' +import { render, fireEvent, cleanup } from '@testing-library/react' function Fade({ children, ...props }) { return ( diff --git a/docs/example-update-props.md b/docs/example-update-props.md index 8bcd8f501..9fcf8cec5 100644 --- a/docs/example-update-props.md +++ b/docs/example-update-props.md @@ -10,7 +10,7 @@ sidebar_label: Update Props // that your first call created for you. import React from 'react' -import { render, cleanup } from 'react-testing-library' +import { render, cleanup } from '@testing-library/react' let idCounter = 1 diff --git a/docs/guide-which-query.md b/docs/guide-which-query.md index 60ed8c48b..46b360172 100644 --- a/docs/guide-which-query.md +++ b/docs/guide-which-query.md @@ -45,7 +45,7 @@ id is a bad practice because users can't see or identify these attributes. Use a testid if you have to. ```jsx -// react-testing-library +// @testing-library/react const { container } = render() const foo = container.querySelector('[data-foo="bar"]') ``` diff --git a/docs/intro.md b/docs/intro.md index d9237d2f6..866314df0 100644 --- a/docs/intro.md +++ b/docs/intro.md @@ -18,7 +18,7 @@ slow you and your team down. ## This solution -The core library, [`dom-testing-library`][dom], is a light-weight solution for +The core library, [`DOM Testing Library`][dom], is a light-weight solution for testing web pages by querying and interacting with DOM nodes (whether simulated with [`JSDOM`][jsdom]/[Jest][jest] or in the browser). The main utilities it provides involve querying the DOM for nodes in a way that's similar to how the @@ -36,7 +36,7 @@ is also a plugin to use testing-library queries for end-to-end tests in 1. A test runner or framework 2. Specific to a testing framework -`dom-testing-library` works with any environment that provides DOM APIs, such as +`DOM Testing Library` works with any environment that provides DOM APIs, such as Jest, Mocha + JSDOM, or a real browser [jest]: https://jestjs.io diff --git a/docs/learning.md b/docs/learning.md index a5c57f004..e063c4364 100644 --- a/docs/learning.md +++ b/docs/learning.md @@ -6,30 +6,30 @@ sidebar_label: Learning Material - [TestingJavaScript.com](https://testingjavascript.com) 🏆 A HUGE course all about testing JavaScript applications (See also the - [course material with many examples using react-testing-library](https://github.com/kentcdodds/react-testing-library-course)) + [course material with many examples using React Testing Library](https://github.com/kentcdodds/react-testing-library-course)) by [Kent C. Dodds](https://github.com/kentcdodds) - [Migrating from Enzyme shallow rendering to explicit component mocks](https://www.youtube.com/watch?v=LHUdxkThTM0&list=PLV5CVI1eNcJgCrPH_e6d57KRUTiDZgs0u) - [Confident React](https://www.youtube.com/watch?v=qXRPHRgcXJ0&list=PLV5CVI1eNcJgNqzNwcs4UKrlJdhfDjshf) -- [Test Driven Development with react-testing-library](https://www.youtube.com/watch?v=kCR3JAR7CHE&list=PLV5CVI1eNcJgCrPH_e6d57KRUTiDZgs0u) +- [Test Driven Development with React Testing Library](https://www.youtube.com/watch?v=kCR3JAR7CHE&list=PLV5CVI1eNcJgCrPH_e6d57KRUTiDZgs0u) - [Testing React and Web Applications](https://kentcdodds.com/workshops/#testing-react-and-web-applications) - [Build a joke app with TDD](https://medium.com/@mbaranovski/quick-guide-to-tdd-in-react-81888be67c64) by [@mbaranovski](https://github.com/mbaranovski) - [Build a comment feed with TDD](https://medium.freecodecamp.org/how-to-build-sturdy-react-apps-with-tdd-and-the-react-testing-library-47ad3c5c8e47) by [@iwilsonq](https://github.com/iwilsonq) -- [A clear way to unit testing React JS components using Jest and react-testing-library](https://www.richardkotze.com/coding/react-testing-library-jest) +- [A clear way to unit testing React JS components using Jest and React Testing Library](https://www.richardkotze.com/coding/react-testing-library-jest) by [Richard Kotze](https://github.com/rkotze) -- [Intro to react-testing-library](https://chrisnoring.gitbooks.io/react/content/testing/react-testing-library.html) +- [Intro to React Testing Library](https://chrisnoring.gitbooks.io/react/content/testing/react-testing-library.html) by [Chris Noring](https://github.com/softchris) - [Integration testing in React](https://medium.com/@jeffreyrussom/integration-testing-in-react-21f92a55a894) by [Jeffrey Russom](https://github.com/qswitcher) -- [React-testing-library have fantastic testing 🐐](https://medium.com/yazanaabed/react-testing-library-have-a-fantastic-testing-198b04699237) +- [React Testing Library have fantastic testing 🐐](https://medium.com/yazanaabed/react-testing-library-have-a-fantastic-testing-198b04699237) by [Yazan Aabed](https://github.com/YazanAabeed) - [Building a React Tooltip Library](https://www.youtube.com/playlist?list=PLMV09mSPNaQmFLPyrfFtpUdClVfutjF5G) by [divyanshu013](https://github.com/divyanshu013) and [metagrover](https://github.com/metagrover) -- [A sample repo using react-testing-library to test a Relay Modern GraphQL app](https://github.com/zth/relay-modern-flow-jest-example) +- [A sample repo using React Testing Library to test a Relay Modern GraphQL app](https://github.com/zth/relay-modern-flow-jest-example) - [Creating Readable Tests Using React Testing Library](https://medium.com/flatiron-labs/creating-readable-tests-using-react-testing-library-2bd03c49c284) by [Lukeghenco](https://github.com/Lukeghenco) -- [My Experience moving from Enzyme to react-testing-library](https://medium.com/@boyney123/my-experience-moving-from-enzyme-to-react-testing-library-5ac65d992ce) by [David Boyne](https://github.com/boyney123) +- [My Experience moving from Enzyme to React Testing Library](https://medium.com/@boyney123/my-experience-moving-from-enzyme-to-react-testing-library-5ac65d992ce) by [David Boyne](https://github.com/boyney123) Feel free to contribute more! diff --git a/docs/native-testing-library/api.md b/docs/native-testing-library/api.md index 4ba874e1d..20bf4ab8a 100644 --- a/docs/native-testing-library/api.md +++ b/docs/native-testing-library/api.md @@ -5,7 +5,7 @@ sidebar_label: API --- Here you'll find a high level summary of the most frequently used parts of -native-testing-library. For a more comprehensive look at what's possible, check +Native Testing Library. For a more comprehensive look at what's possible, check out the [main docs site](https://native-testing-library.com). - [`render`](#render) @@ -25,13 +25,13 @@ function render( Create a `ReactTestRenderer` Instance. ```jsx -import { render } from 'native-testing-library' +import { render } from '@testing-library/react-native' render() ``` ```javascript -import { render } from 'native-testing-library' +import { render } from '@testing-library/react-native' test('renders a message', () => { const { container, getByText } = render(Hello, World!) @@ -46,7 +46,7 @@ test('renders a message', () => { Most of the time you won't need to pass any options to `render`, but when you do, you will pass them as the second parameter. There are some important key -differences between this and `react-testing-library` that you will want to be +differences between this and `React Testing Library` that you will want to be aware of. ### `wrapper` @@ -57,13 +57,13 @@ for common data providers. See [setup](setup.md#custom-render) for examples. ### `queries` -Queries to bind. Overrides the default set from `native-testing-library` unless +Queries to bind. Overrides the default set from `Native Testing Library` unless merged. ```js // Example, a function to traverse table contents import * as tableQueries from 'my-table-query-libary' -import queries from 'native-testing-library' +import queries from '@testing-library/react-native' const { getByRowColumn, getByText } = render(, { queries: { ...queries, ...tableQueries }, @@ -111,7 +111,7 @@ searching logic you wanted to.. This method is a shortcut for `console.log(prettyPrint(container.toJSON()))`. ```javascript -import { render } from 'native-testing-library' +import { render } from '@testing-library/react-native' const { debug } = render( @@ -135,7 +135,7 @@ Although its likely better to test updating your props the way a user would entire tree at the base with new props. ```jsx -import { render } from 'native-testing-library' +import { render } from '@testing-library/react-native' const { rerender } = render() @@ -157,7 +157,7 @@ necessary. > This method is a wrapper around ReactTestRenderer.unmount() ```javascript -import { render } from 'native-testing-library' +import { render } from '@testing-library/react-native' const { unmount } = render() unmount() diff --git a/docs/native-testing-library/cheatsheet.md b/docs/native-testing-library/cheatsheet.md index 8c22418e1..1627524bf 100644 --- a/docs/native-testing-library/cheatsheet.md +++ b/docs/native-testing-library/cheatsheet.md @@ -5,7 +5,7 @@ sidebar_label: Cheat Sheet --- There is a printable one-page cheat sheet available for you to download. It is -intended to be a quick reference for `native-testing-library`, but is not a +intended to be a quick reference for `Native Testing Library`, but is not a complete API glossary or guide. Keep a copy of it on your desk to quickly take a peek at the most commonly used functionality! diff --git a/docs/native-testing-library/example-intro.md b/docs/native-testing-library/example-intro.md index 30ccc3142..ffb54fde5 100644 --- a/docs/native-testing-library/example-intro.md +++ b/docs/native-testing-library/example-intro.md @@ -7,7 +7,7 @@ sidebar_label: Example ```javascript import React from 'react' import { Button, Text, TextInput, View } from 'react-native' -import { fireEvent, render, wait } from 'native-testing-library' +import { fireEvent, render, wait } from '@testing-library/react-native' function Example() { const [name, setUser] = React.useState('') diff --git a/docs/native-testing-library/intro.md b/docs/native-testing-library/intro.md index 18fb23a91..a7b3dcba0 100644 --- a/docs/native-testing-library/intro.md +++ b/docs/native-testing-library/intro.md @@ -5,9 +5,9 @@ sidebar_label: Intro --- Native Testing Library is a testing library for **React Native** inspired by -`dom-testing-library`. Because React Native does not run in a browser +`DOM Testing Library`. Because React Native does not run in a browser environment, the core queries are implemented independently, unlike other -wrappers that use `dom-testing-library` as the base. You'll find much more +wrappers that use `DOM Testing Library` as the base. You'll find much more information about the library, including examples, on the project sites: - [Docs][docs] @@ -17,10 +17,10 @@ information about the library, including examples, on the project sites: ## Quickstart ``` -npm install --save-dev native-testing-library +npm install --save-dev @testing-library/react-native ``` -- [native-testing-library on GitHub][gh] +- [Native Testing Library on GitHub][gh] [docs]: https://native-testing-library.com [gh]: https://github.com/testing-library/native-testing-library @@ -36,19 +36,19 @@ write tests using that philosophy in React Native. ## This solution -`native-testing-library` is an implementation of the well-known +`Native Testing Library` is an implementation of the well-known `testing-library` API that works for React Native. The primary goal is to mimic the testing library API as closely as possible while still accounting for the differences in the platforms. Accomplishing this is no small feat because of the differences between the two platforms. Although most framework implementations -like `react-testing-library` are thin layers over `dom-testing-library`, this +like `React Testing Library` are thin layers over `DOM Testing Library`, this library needed to have its own base implementation as well as a user-facing API. This library uses the [react-test-renderer](https://reactjs.org/docs/test-renderer.html), whereas -`dom-testing-library` uses ReactDOM and JSDOM. The main philosophy is that you +`DOM Testing Library` uses ReactDOM and JSDOM. The main philosophy is that you should find elements that are on the "screen" the way users would. This approach is meant to give you confidence that your app is working as a cohesive unit. -Just like the `dom-testing-library`, `native-testing-library`'s primary guiding +Just like the `DOM Testing Library`, `Native Testing Library`'s primary guiding principle is: > [The more your tests resemble the way your software is used, the more confidence they can give you.](guiding-principles.md) diff --git a/docs/native-testing-library/setup.md b/docs/native-testing-library/setup.md index eff881398..a395cf709 100644 --- a/docs/native-testing-library/setup.md +++ b/docs/native-testing-library/setup.md @@ -6,12 +6,12 @@ sidebar_label: Setup ## Setting up your project -The `native-testing-library` API should work out of the box for most tests. All +The `Native Testing Library` API should work out of the box for most tests. All of the snippets you'll find throughout the website work without any additional configuration assuming you use Jest and a moderately recent version of React Native. -We strongly encourage you to use Jest with the `native-testing-library` preset. +We strongly encourage you to use Jest with the `Native Testing Library` preset. The `react-native` preset should also work, but you'll be getting the best experience when using our preset. There may be some additional mocks you need to provide to such as mocks for `react-native-gesture-handler` when using @@ -22,7 +22,7 @@ provide to such as mocks for `react-native-gesture-handler` when using It's often useful to define a custom render method that includes things like global context providers, data stores, etc. To make this available globally, one approach is to define a utility file that re-exports everything from -`native-testing-library`. You can replace `native-testing-library` with this +`Native Testing Library`. You can replace `Native Testing Library` with this file in all your imports. See [below](#configuring-jest-with-test-utils) for a way to make your test util file accessible without using relative paths. @@ -31,13 +31,13 @@ The example below sets up data providers using the ```diff // my-component.test.js -- import { render, fireEvent } from 'native-testing-library'; +- import { render, fireEvent } from '@testing-library/react-native'; + import { render, fireEvent } from '../test-utils'; ``` ```js // test-utils.js -import { render } from 'native-testing-library' +import { render } from '@testing-library/react-native' import { ThemeProvider } from 'my-ui-lib' import { TranslationProvider } from 'my-i18n-lib' import defaultStrings from 'i18n/en-x-default' @@ -56,7 +56,7 @@ const customRender = (ui, options) => render(ui, { wrapper: AllTheProviders, ...options }) // re-export everything -export * from 'native-testing-library' +export * from '@testing-library/react-native' // override render method export { customRender as render } diff --git a/docs/pptr-testing-library/intro.md b/docs/pptr-testing-library/intro.md index f99616cf6..b3956eedb 100644 --- a/docs/pptr-testing-library/intro.md +++ b/docs/pptr-testing-library/intro.md @@ -4,7 +4,7 @@ title: Puppeteer Testing Library --- [`pptr-testing-library`][gh] is a lightweight adapter allowing -`dom-testing-library` to be used with [`puppeteer`][ghpuppeteer]. +`DOM Testing Library` to be used with [`puppeteer`][ghpuppeteer]. ``` npm install --save-dev puppeteer pptr-testing-library @@ -35,7 +35,7 @@ await $email.type('pptr@example.com') await wait(() => getByText('Loading...')) ``` -A little too un-puppeteer for you? You can attach all the `dom-testing-library` +A little too un-puppeteer for you? You can attach all the `DOM Testing Library` methods directly onto puppeteer's `ElementHandle` instead! ```js @@ -57,21 +57,21 @@ const $email = await getByLabelText('Email') ### API -Unique methods, not part of `dom-testing-library`. +Unique methods, not part of `DOM Testing Library`. - `getDocument(page: puppeteer.Page): ElementHandle` - get an ElementHandle for the document ### Forwarded methods -`dom-testing-library` is injected into the page that puppeteer is controlling on +`DOM Testing Library` is injected into the page that puppeteer is controlling on each query, so all results will be async. It's still recommended that you use puppeteer's built-in methods for interaction rather than `fireEvent`. ## Known Limitations - `waitForElement` method is not exposed. Puppeteer has its own set of wait - utilities that somewhat conflict with the style used in `dom-testing-library`. + utilities that somewhat conflict with the style used in `DOM Testing Library`. See [the issue on GitHub](https://github.com/patrickhulce/pptr-testing-library/issues/3). - `fireEvent` method is not exposed, use puppeteer's built-ins instead. diff --git a/docs/react-testing-library/api.md b/docs/react-testing-library/api.md index 580ab6cf2..cd8a0f7a2 100644 --- a/docs/react-testing-library/api.md +++ b/docs/react-testing-library/api.md @@ -3,7 +3,7 @@ id: api title: API --- -`react-testing-library` re-exports everything from `dom-testing-library` as well +`React Testing Library` re-exports everything from `DOM Testing Library` as well as these methods: - [`render`](#render) @@ -26,13 +26,13 @@ function render( Render into a container which is appended to `document.body`. ```jsx -import { render } from 'react-testing-library' +import { render } from '@testing-library/react' render(
) ``` ```jsx -import { render, cleanup } from 'react-testing-library' +import { render, cleanup } from '@testing-library/react' import 'jest-dom/extend-expect' afterEach(cleanup) @@ -57,7 +57,7 @@ available options which you could provide as a second argument to `render`. ### `container` -By default, `react-testing-library` will create a `div` and append that div to +By default, `React Testing Library` will create a `div` and append that div to the `document.body` and this is where your react component will be rendered. If you provide your own HTMLElement `container` via this option, it will not be appended to the `document.body` automatically. @@ -94,13 +94,13 @@ for common data providers. See [setup](setup.md#custom-render) for examples. ### `queries` -Queries to bind. Overrides the default set from `dom-testing-library` unless +Queries to bind. Overrides the default set from `DOM Testing Library` unless merged. ```js // Example, a function to traverse table contents import * as tableQueries from 'my-table-query-libary' -import queries from 'react-testing-library' +import queries from '@testing-library/react' const { getByRowColumn, getByText } = render(, { queries: { ...queries, ...tableQueries }, @@ -120,7 +120,7 @@ The `render` method returns an object that has a few properties: ### `...queries` The most important feature of `render` is that the queries from -[dom-testing-library](dom-testing-library/api-queries.md) are automatically +[DOM Testing Library](dom-testing-library/api-queries.md) are automatically returned with their first argument bound to the [baseElement](#baseelement), which defaults to `document.body`. @@ -170,7 +170,7 @@ This method is a shortcut for `console.log(prettyDOM(baseElement))`. ```jsx import React from 'react' -import { render } from 'react-testing-library' +import { render } from '@testing-library/react' const HelloWorld = () =>

Hello World

const { debug } = render() @@ -182,7 +182,7 @@ debug() ``` This is a simple wrapper around `prettyDOM` which is also exposed and comes from -[`dom-testing-library`](https://github.com/testing-library/dom-testing-library/blob/master/README.md#prettydom). +[`DOM Testing Library`](https://github.com/testing-library/dom-testing-library/blob/master/README.md#prettydom). ### `rerender` @@ -193,7 +193,7 @@ prefer to update the props of a rendered component in your test, this function can be used to update props of the rendered component. ```jsx -import { render } from 'react-testing-library' +import { render } from '@testing-library/react' const { rerender } = render() @@ -213,7 +213,7 @@ that you don't leave event handlers hanging around causing memory leaks). > `ReactDOM.unmountComponentAtNode` ```jsx -import { render } from 'react-testing-library' +import { render } from '@testing-library/react' const { container, unmount } = render() unmount() @@ -226,7 +226,7 @@ Returns a `DocumentFragment` of your rendered component. This can be useful if you need to avoid live bindings and see how your component reacts to events. ```jsx -import { render, fireEvent } from 'react-testing-library' +import { render, fireEvent } from '@testing-library/react' class TestComponent extends React.Component { constructor() { @@ -263,7 +263,7 @@ expect(firstRender).toMatchDiffSnapshot(asFragment()) Unmounts React trees that were mounted with [render](#render). ```jsx -import { cleanup, render } from 'react-testing-library' +import { cleanup, render } from '@testing-library/react' afterEach(cleanup) // <-- add this diff --git a/docs/react-testing-library/cheatsheet.md b/docs/react-testing-library/cheatsheet.md index c00758d26..966ac51d5 100644 --- a/docs/react-testing-library/cheatsheet.md +++ b/docs/react-testing-library/cheatsheet.md @@ -5,16 +5,16 @@ title: Cheatsheet **[Get the printable cheat sheet][cheatsheet]** -A short guide to all the exported functions in `react-testing-library` +A short guide to all the exported functions in `React Testing Library` - **render** `const {/* */} = render(Component)` returns: - - all the queries from `dom-testing-library`, bound to the document so there + - all the queries from `DOM Testing Library`, bound to the document so there is no need to pass a node as the first argument - `unmount` function to unmount the component - `container` reference to the DOM node where the component is mounted ```jsx -import { render, fireEvent } from 'react-testing-library' +import { render, fireEvent } from '@testing-library/react' test('loads items eventually', async () => { const { getByText, findByText } = render() @@ -30,10 +30,10 @@ test('loads items eventually', async () => { ## Queries -> **Difference from dom-testing-library** +> **Difference from DOM Testing Library** > -> The queries returned from `render` in `react-testing-library` are the same as -> `dom-testing-library` except they have the first argument bound to the +> The queries returned from `render` in `React Testing Library` are the same as +> `DOM Testing Library` except they have the first argument bound to the > document, so instead of `getByText(node, 'text')` you do `getByText('text')` See [Which query should I use?](guide-which-query.md) @@ -126,7 +126,7 @@ See [Events API](dom-testing-library/api-events.md) - [See all supported events](https://github.com/testing-library/dom-testing-library/blob/master/src/events.js) - **act** wrapper around [react-dom/test-utils act](https://reactjs.org/docs/test-utils.html#act); - react-testing-library wraps render and fireEvent in a call to `act` already so + React Testing Library wraps render and fireEvent in a call to `act` already so most cases should not require using it manually ## Other @@ -135,7 +135,7 @@ See [Helpers API](dom-testing-library/api-helpers.md), [Config API](dom-testing-library/api-configuration.md) - **within** take a node and return an object with all the queries bound to the - node (used to return the queries from `react-testing-library`'s render + node (used to return the queries from `React Testing Library`'s render method): `within(node).getByText("hello")` - **configure** change global options: `configure({testIdAttribute: 'my-data-test-id'})` diff --git a/docs/react-testing-library/example-intro.md b/docs/react-testing-library/example-intro.md index 56792fe15..9292a2188 100644 --- a/docs/react-testing-library/example-intro.md +++ b/docs/react-testing-library/example-intro.md @@ -16,7 +16,7 @@ import { fireEvent, cleanup, waitForElement, -} from 'react-testing-library' +} from '@testing-library/react' import 'jest-dom/extend-expect' import axiosMock from 'axios' import Fetch from '../fetch' @@ -60,7 +60,7 @@ import { fireEvent, cleanup, waitForElement, -} from 'react-testing-library' +} from '@testing-library/react' // add custom jest matchers from jest-dom import 'jest-dom/extend-expect' diff --git a/docs/react-testing-library/faq.md b/docs/react-testing-library/faq.md index 5784e4977..20f57735a 100644 --- a/docs/react-testing-library/faq.md +++ b/docs/react-testing-library/faq.md @@ -17,8 +17,8 @@ In summary: ```javascript import React from 'react' -import 'react-testing-library/cleanup-after-each' -import { render, fireEvent } from 'react-testing-library' +import '@testing-library/react/cleanup-after-each' +import { render, fireEvent } from '@testing-library/react' test('change values via the fireEvent.change method', () => { const handleChange = jest.fn() @@ -49,12 +49,12 @@ input.value = 'a' Simulate.change(input) ``` -We can't do this with react-testing-library because React actually keeps track +We can't do this with React Testing Library because React actually keeps track of any time you assign the `value` property on an `input` and so when you fire the `change` event, React thinks that the value hasn't actually been changed. This works for Simulate because they use internal APIs to fire special simulated -events. With react-testing-library, we try to avoid implementation details to +events. With React Testing Library, we try to avoid implementation details to make your tests more resiliant. So we have it worked out for the change event handler to set the property for diff --git a/docs/react-testing-library/intro.md b/docs/react-testing-library/intro.md index e2afa5e47..b7add1f87 100644 --- a/docs/react-testing-library/intro.md +++ b/docs/react-testing-library/intro.md @@ -4,14 +4,14 @@ title: React Testing Library sidebar_label: Introduction --- -[`react-testing-library`][gh] builds on top of `dom-testing-library` by adding +[`React Testing Library`][gh] builds on top of `DOM Testing Library` by adding APIs for working with React components. ``` -npm install --save-dev react-testing-library +npm install --save-dev @testing-library/react ``` -- [react-testing-library on GitHub][gh] +- [React Testing Library on GitHub][gh] [gh]: https://github.com/testing-library/react-testing-library @@ -27,7 +27,7 @@ your team down. ## This solution -The `react-testing-library` is a very light-weight solution for testing React +The `React Testing Library` is a very light-weight solution for testing React components. It provides light utility functions on top of `react-dom` and `react-dom/test-utils`, in a way that encourages better testing practices. Its primary guiding principle is: @@ -61,7 +61,7 @@ facilitate testing implementation details). Read more about this in [Using Without Jest](./setup#using-without-jest)) > NOTE: This library is built on top of -> [`dom-testing-library`](dom-testing-library/intro.md) which is where most of +> [`DOM Testing Library`](dom-testing-library/intro.md) which is where most of > the logic behind the queries is. ## Video diff --git a/docs/react-testing-library/setup.md b/docs/react-testing-library/setup.md index 5569e7cb5..aa4f664e6 100644 --- a/docs/react-testing-library/setup.md +++ b/docs/react-testing-library/setup.md @@ -4,11 +4,11 @@ title: Setup sidebar_label: Setup --- -`react-testing-library` does not require any configuration to be used (as +`React Testing Library` does not require any configuration to be used (as demonstrated in the example above). However, there are some things you can do when configuring your testing framework to reduce some boilerplate. In these docs we'll demonstrate configuring Jest, but you should be able to do similar -things with [any testing framework](#using-without-jest) (react-testing-library +things with [any testing framework](#using-without-jest) (React Testing Library does not require that you use Jest). ## Global Config @@ -29,7 +29,7 @@ option to your Jest config: // jest.config.js module.exports = { setupFilesAfterEnv: [ - 'react-testing-library/cleanup-after-each', + '@testing-library/react/cleanup-after-each', // ... other setup files ... ], // ... other options ... @@ -64,7 +64,7 @@ module.exports = { import 'jest-dom/extend-expect' // this is basically: afterEach(cleanup) -import 'react-testing-library/cleanup-after-each' +import '@testing-library/react/cleanup-after-each' ``` @@ -74,7 +74,7 @@ import 'react-testing-library/cleanup-after-each' It's often useful to define a custom render method that includes things like global context providers, data stores, etc. To make this available globally, one approach is to define a utility file that re-exports everything from -`react-testing-library`. You can replace react-testing-library with this file in +`React Testing Library`. You can replace React Testing Library with this file in all your imports. See [below](#configuring-jest-with-test-utils) for a way to make your test util file accessible without using relative paths. @@ -83,13 +83,13 @@ The example below sets up data providers using the ```diff // my-component.test.js -- import { render, fireEvent } from 'react-testing-library'; +- import { render, fireEvent } from '@testing-library/react'; + import { render, fireEvent } from '../test-utils'; ``` ```js // test-utils.js -import { render } from 'react-testing-library' +import { render } from '@testing-library/react' import { ThemeProvider } from 'my-ui-lib' import { TranslationProvider } from 'my-i18n-lib' import defaultStrings from 'i18n/en-x-default' @@ -108,7 +108,7 @@ const customRender = (ui, options) => render(ui, { wrapper: AllTheProviders, ...options }) // re-export everything -export * from 'react-testing-library' +export * from '@testing-library/react' // override render method export { customRender as render } @@ -128,7 +128,7 @@ You can use CommonJS modules instead of ES modules, which should work in Node: ```js // test-utils.js -const rtl = require('react-testing-library') +const rtl = require('@testing-library/react') const customRender = (ui, options) => rtl.render(ui, { @@ -200,8 +200,8 @@ NODE_PATH=src/utils ## Using without Jest If you're running your tests in the browser bundled with webpack (or similar) -then `react-testing-library` should work out of the box for you. However, most -people using react-testing-library are using it with the Jest testing framework +then `React Testing Library` should work out of the box for you. However, most +people using React Testing Library are using it with the Jest testing framework with the `testEnvironment` set to `jest-environment-jsdom` (which is the default configuration with Jest). diff --git a/docs/testcafe-testing-library/intro.md b/docs/testcafe-testing-library/intro.md index f32f625c0..25a4b1465 100644 --- a/docs/testcafe-testing-library/intro.md +++ b/docs/testcafe-testing-library/intro.md @@ -32,7 +32,7 @@ fixture`selectors`.beforeEach(addTestcafeTestingLibrary) You can now import & use `getBy`, `getAllBy`, `queryBy` and `queryAllBy` selectors in your tests. -[See `dom-testing-library` API for reference](dom-testing-library/api-queries.md) +[See `DOM Testing Library` API for reference](dom-testing-library/api-queries.md) ## Examples diff --git a/docs/vue-testing-library/intro.md b/docs/vue-testing-library/intro.md index f6ac5ddcf..0aa9e9e06 100644 --- a/docs/vue-testing-library/intro.md +++ b/docs/vue-testing-library/intro.md @@ -3,20 +3,20 @@ id: intro title: Vue Testing Library --- -[`vue-testing-library`][gh] is a lightweight adapter allowing -`dom-testing-library` to be used to test [Vue](https://vuejs.org/) components +[`Vue Testing Library`][gh] is a lightweight adapter allowing +`DOM Testing Library` to be used to test [Vue](https://vuejs.org/) components built on top of `@vue/test-utils`. ``` -npm install --save-dev vue vue-testing-library +npm install --save-dev vue @testing-library/vue ``` -- [vue-testing-library on GitHub][gh] +- [Vue Testing Library on GitHub][gh] ## Usage ``` -npm install --save-dev vue-testing-library +npm install --save-dev @testing-library/vue jest vue-jest babel-jest @@ -80,7 +80,7 @@ npm install --save-dev vue-testing-library ```js // src/TestComponent.spec.js import 'jest-dom/extend-expect' -import { render } from 'vue-testing-library' +import { render } from '@testing-library/vue' import TestComponent from './TestComponent' test('should render HelloWorld', () => { @@ -89,7 +89,7 @@ test('should render HelloWorld', () => { }) ``` -You can now use all of `dom-testing-library`'s `getBy`, `getAllBy`, `queryBy` +You can now use all of `DOM Testing Library`'s `getBy`, `getAllBy`, `queryBy` and `queryAllBy` commands. See [here](dom-testing-library/api-queries.md) for usage. @@ -113,9 +113,9 @@ helper methods 3. configurationCb - A callback to be called passing the Vue instance when created. This allows 3rd party plugins to be installed prior to mount. -### Forwarded methods from dom-testing-library +### Forwarded methods from DOM Testing Library -vue-testing-library forwards all exports from dom-testing-library but it alters +Vue Testing Library forwards all exports from `DOM Testing Library` but it alters `fireEvent` so that all events are async (ie: `await fireEvent.click(button)`) In particular, the `wait` utility can be very important in Vue components, diff --git a/website/README.md b/website/README.md index 740fb67be..c6833deab 100755 --- a/website/README.md +++ b/website/README.md @@ -1,6 +1,6 @@ # React Testing Library Docs -[react-testing-library](https://github.com/testing-library/react-testing-library) +[React Testing Library](https://github.com/testing-library/react-testing-library) ## Contributing diff --git a/website/pages/en/help.js b/website/pages/en/help.js index 7660e24af..fbcda12d6 100755 --- a/website/pages/en/help.js +++ b/website/pages/en/help.js @@ -41,7 +41,7 @@ function Help(props) { { content: `Stay up to date by following the [blog](${ props.config.baseUrl - }blog)`, + }blog)`, title: 'Blog', }, { @@ -70,14 +70,14 @@ function Help(props) {

Buy a Course

Learn how to test React with Kent C. Dodds, the creator of - react-testing-library + React Testing Library