Update Testing Libraries naming in docs (#125)

* Update import statements

* Update library name

* Update unpkg URL

* Fix main exports section

* Remove backticks

* Update vue-testing-library references

* Update cypress-testing-library references

* Update react-testing-library import statements

* Update react-testing-library references

* Rename native-testing-library imports

* Update native-testing-library references

* Rename jest-native references

Author: afontcu

.vscode/markdown.code-snippets

@@ -27,15 +27,15 @@
 			"",
 			"<!--Native-->",
 			"```js",
-			"import { $1 } from 'dom-testing-library'",
+			"import { $1 } from '@testing-library/dom'",
 			"",
 			"const container = document.body",
 			"const $3 = $1(container, '$2')",
 			"```",
 			"",
 			"<!--React-->",
 			"```js",
-			"import { render } from 'react-testing-library'",
+			"import { render } from '@testing-library/react'",
 			"",
 			"const { $1 } = render(<MyComponent />)",
 			"const $3 = $1('$2')",
@@ -50,4 +50,4 @@
 		],
 		"description": "Create a Docusaurus multi-language code block"
 	}
-}
+}

README.md

@@ -8,7 +8,7 @@ testing-library-docs
 [![Code of Conduct][coc-badge]][coc]
 <!-- prettier-ignore-end -->
 
-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
 

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

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

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
 

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

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'})`
 ```

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:
 <!--Native-->
 
 ```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')
 <!--React-->
 
 ```js
-import { render, within } from 'react-testing-library'
+import { render, within } from '@testing-library/react'
 
 const { getByLabelText } = render(<MyComponent />)
 const signinModal = getByLabelText('Sign In')

docs/dom-testing-library/api-queries.md

@@ -107,7 +107,7 @@ The example below will find the input node for the following DOM structures:
 <!--Native-->
 
 ```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')
 <!--React-->
 
 ```js
-import { render } from 'react-testing-library'
+import { render } from '@testing-library/react'
 
 const { getByLabelText } = render(<Login />)
 
@@ -172,7 +172,7 @@ matches the given [`TextMatch`](#textmatch).
 <!--Native-->
 
 ```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')
 <!--React-->
 
 ```js
-import { render } from 'react-testing-library'
+import { render } from '@testing-library/react'
 
 const { getByPlaceholderText } = render(<MyComponent />)
 const inputNode = getByPlaceholderText('Username')
@@ -229,7 +229,7 @@ matching the given [`TextMatch`](#textmatch).
 <!--Native-->
 
 ```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)
 <!--React-->
 
 ```js
-import { render } from 'react-testing-library'
+import { render } from '@testing-library/react'
 
 const { getByText } = render(<MyComponent />)
 const aboutAnchorNode = getByText(/about/i)
@@ -305,7 +305,7 @@ as it's deprecated).
 <!--Native-->
 
 ```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)
 <!--React-->
 
 ```js
-import { render } from 'react-testing-library'
+import { render } from '@testing-library/react'
 
 const { getByAltText } = render(<MyComponent />)
 const incrediblesPosterImg = getByAltText(/incredibles.*? poster/i)
@@ -360,7 +360,7 @@ Will also find a `title` element within an SVG.
 <!--Native-->
 
 ```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')
 <!--React-->
 
 ```js
-import { render } from 'react-testing-library'
+import { render } from '@testing-library/react'
 
 const { getByTitle } = render(<MyComponent />)
 const deleteElement = getByTitle('Delete')
@@ -419,7 +419,7 @@ document.getElementById('lastName').value = 'Norris'
 <!--Native-->
 
 ```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')
 <!--React-->
 
 ```js
-import { render } from 'react-testing-library'
+import { render } from '@testing-library/react'
 
 const { getByDisplayValue } = render(<MyComponent />)
 const lastNameInput = getByDisplayValue('Norris')
@@ -457,7 +457,7 @@ document.getElementById('messageTextArea').value = 'Hello World'
 <!--Native-->
 
 ```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')
 <!--React-->
 
 ```js
-import { render } from 'react-testing-library'
+import { render } from '@testing-library/react'
 
 const { getByDisplayValue } = render(<MyComponent />)
 const messageTextArea = getByDisplayValue('Hello World')
@@ -499,7 +499,7 @@ matches the given [`TextMatch`](#textmatch).
 <!--Native-->
 
 ```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')
 <!--React-->
 
 ```js
-import { render } from 'react-testing-library'
+import { render } from '@testing-library/react'
 
 const { getByDisplayValue } = render(<MyComponent />)
 const selectElement = getByDisplayValue('Alaska')
@@ -549,7 +549,7 @@ accepts a [`TextMatch`](#textmatch)).
 <!--Native-->
 
 ```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')
 <!--React-->
 
 ```js
-import { render } from 'react-testing-library'
+import { render } from '@testing-library/react'
 
 const { getByRole } = render(<MyComponent />)
 const dialogContainer = getByRole('dialog')
@@ -599,7 +599,7 @@ also accepts a [`TextMatch`](#textmatch)).
 <!--Native-->
 
 ```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')
 <!--React-->
 
 ```js
-import { render } from 'react-testing-library'
+import { render } from '@testing-library/react'
 
 const { getByTestId } = render(<MyComponent />)
 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.