testing-library · alexkrolick · Nov 12, 2020 · Oct 2, 2020 · Oct 13, 2020 · Oct 13, 2020
diff --git a/docs/dom-testing-library/api-configuration.mdx b/docs/dom-testing-library/api-configuration.mdx
@@ -29,7 +29,7 @@ e.g. `window.getComputedStyle(document.createElement('div'), '::after')`.
 Defaults to `false`
 
 `defaultHidden`: The default value for the `hidden` option used by
-[`getByRole`](api-queries#byrole). Defaults to `false`.
+[`getByRole`](api-queries.mdx#byrole). Defaults to `false`.
 
 `showOriginalStackTrace`: By default, `waitFor` will ensure that the stack trace
 for errors thrown by Testing Library is cleaned up and shortened so it's easier
@@ -50,11 +50,11 @@ option.
 screen.getByTestId('foo', { suggest: false }) // will not throw a suggestion
 ```
 
-`testIdAttribute`: The attribute used by [`getByTestId`](api-queries#bytestid)
+`testIdAttribute`: The attribute used by [`getByTestId`](api-queries.mdx#bytestid)
 and related queries. Defaults to `data-testid`.
 
 `getElementError`: A function that returns the error used when
-[`getBy*`](api-queries#getby) or [`getAllBy*`](api-queries#getallby) fail. Takes
+[`getBy*`](api-queries.mdx#getby) or [`getAllBy*`](api-queries.mdx#getallby) fail. Takes
 the error message and container object as arguments.
 
 `asyncUtilTimeout`: The global timeout value in milliseconds used by `waitFor`

diff --git a/docs/dom-testing-library/api-helpers.mdx b/docs/dom-testing-library/api-helpers.mdx
@@ -61,15 +61,15 @@ module.exports = {
 >
 > 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).
+> [options](react-testing-library/api.mdx#render-options).
 
 ## `buildQueries`
 
 The `buildQueries` helper allows you to create custom queries with all standard
 [variants](api-queries.mdx) of queries in testing-library.
 
 See the
-[Add custom queries](/docs/react-testing-library/setup#add-custom-queries)
+[Add custom queries](react-testing-library/setup.mdx#add-custom-queries)
 section of the custom render guide for example usage.
 
 ### Using other assertion libraries

diff --git a/docs/dom-testing-library/api-queries.mdx b/docs/dom-testing-library/api-queries.mdx
@@ -43,7 +43,7 @@ to find more than one element, then use `findAllBy`.
 > **Note**
 >
 > this is a simple combination of `getBy*` queries and
-> [`waitFor`](api-async#waitfor). The `findBy*` queries accept the `waitFor`
+> [`waitFor`](api-async.mdx#waitfor). The `findBy*` queries accept the `waitFor`
 > options as the last argument. (i.e.
 > `screen.findByText('text', queryOptions, waitForOptions)`)
 
@@ -708,7 +708,7 @@ assertions about the `Open dialog`-button you would need to use
 `getAllByRole('button', { hidden: true })`.
 
 The default value for `hidden` can
-[be configured](api-configuration#configuration).
+[be configured](api-configuration.mdx#configuration).
 
 #### `selected`
 

diff --git a/docs/dom-testing-library/faq.mdx b/docs/dom-testing-library/faq.mdx
@@ -102,7 +102,7 @@ details** of the component.
 
 We believe this leads to less brittle and more meaningful test code.
 
-Please refer to the [Guiding Principles](../guiding-principles) of this testing
+Please refer to the [Guiding Principles](guiding-principles.mdx) of this testing
 library for more info.
 
 </details>

diff --git a/docs/ecosystem-bs-jest-dom.mdx b/docs/ecosystem-bs-jest-dom.mdx
@@ -4,7 +4,7 @@ title: bs-jest-dom
 ---
 
 [`bs-jest-dom`][gh] is a companion library for
-[`bs-react-testing-library`](/docs/bs-react-testing-library/intro) that provides
+[`bs-react-testing-library`](bs-react-testing-library/intro.mdx) that provides
 custom DOM element matchers for Jest in [ReasonML][re] via
 [BuckleScript][bucklescript].
 

diff --git a/docs/example-react-intl.mdx b/docs/example-react-intl.mdx
@@ -76,7 +76,7 @@ You have two options:
 
 To test our translated component we can create a custom `render` function using
 the `wrapper` option as explained in the
-[setup](./react-testing-library/setup.mdx) page. 
+[setup](react-testing-library/setup.mdx) page. 
 Our custom `render` function can look like this:
 
 ```jsx

diff --git a/docs/marko-testing-library/intro.mdx b/docs/marko-testing-library/intro.mdx
@@ -49,8 +49,8 @@ when a real user uses it.
 **What this library is not**:
 
 1. A test runner or framework
-2. Specific to a testing framework, you can [use it with Jest](./setup#jest),
- [mocha](./setup#mocha), or other test runners.
+2. Specific to a testing framework, you can [use it with Jest](setup.mdx#jest),
+ [mocha](setup.mdx#mocha), or other test runners.
 
 > NOTE: This library is built on top of
 > [`DOM Testing Library`](dom-testing-library/intro.mdx) which is where most of

diff --git a/docs/nightwatch-testing-library/intro.mdx b/docs/nightwatch-testing-library/intro.mdx
@@ -136,5 +136,5 @@ module.exports = {
 }
 ```
 
-[config]: https://testing-library.com/docs/dom-testing-library/api-configuration
+[config]: ../dom-testing-library/api-configuration.mdx
 [gh]: https://github.com/testing-library/nightwatch-testing-library
diff --git a/docs/preact-testing-library/api.mdx b/docs/preact-testing-library/api.mdx
@@ -16,7 +16,7 @@ sidebar_label: API
 
 This library re-exports everything from the DOM Testing Library
 (`@testing-library/dom`). See the
-[documentation](../dom-testing-library/api-queries.mdx) to see what goodies you
+[documentation](dom-testing-library/api-queries.mdx) to see what goodies you
 can use.
 
 ## `render`
@@ -33,7 +33,7 @@ const { results } = render(<YourComponent />, { options })
 | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
 | `container` | The HTML element the component is mounted to. | baseElement |
 | `baseElement` | The root HTML element to which the container is appended to. | document.body |
-| `queries` | Queries to bind to the baseElement. See [getQueriesForElement](../dom-testing-library/api-helpers#within-and-getqueriesforelement-apis). | null |
+| `queries` | Queries to bind to the baseElement. See [getQueriesForElement](dom-testing-library/api-helpers.mdx#within-and-getqueriesforelement-apis). | null |
 | `hydrate` | Used when the component has already been mounted and requires a rerender. Not needed for most people. The rerender function passed back to you does this already. | false |
 | `wrapper` | A parent component to wrap YourComponent. | null |
 
@@ -43,11 +43,11 @@ const { results } = render(<YourComponent />, { options })
 | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `container` | The HTML element the component is mounted to. |
 | `baseElement` | The root HTML element to which the container is appended to. |
-| `debug` | Logs the baseElement using [prettyDom](https://testing-library.com/docs/dom-testing-library/api-helpers#prettydom). |
+| `debug` | Logs the baseElement using [prettyDom](dom-testing-library/api-helpers.mdx#prettydom). |
 | `unmount` | Unmounts the component from the container. |
 | `rerender` | Calls render again passing in the original arguments and sets hydrate to true. |
 | `asFragment` | Returns the innerHTML of the container. |
-| `...queries` | Returns all [query functions](https://testing-library.com/docs/dom-testing-library/api-queries) to be used on the baseElement. If you pass in `query` arguments than this will be those, otherwise all. |
+| `...queries` | Returns all [query functions](dom-testing-library/api-queries.mdx) to be used on the baseElement. If you pass in `query` arguments than this will be those, otherwise all. |
 
 ## `cleanup`
 
@@ -82,7 +82,7 @@ Even thought it's for React, it gives you an idea of why it's needed.
 ## `fireEvent`
 
 Passes it to the @testing-library/dom
-[fireEvent](../dom-testing-library/api-events). It's also wrapped in `act` so
+[fireEvent](dom-testing-library/api-events.mdx). It's also wrapped in `act` so
 you don't need to worry about doing it.
 
 📝 Keep in mind mainly when using `h / Preact.createElement` that React uses a

diff --git a/docs/preact-testing-library/intro.mdx b/docs/preact-testing-library/intro.mdx
@@ -34,13 +34,13 @@ See the [Dom introduction][dom-solution-explainer] and [React
 introduction][react-solution-explainer] for a more in-depth explanation.
 
 [dom-solution-explainer]: ../dom-testing-library/intro.mdx#this-solution
-[react-solution-explainer]: ../react-testing-library/intro#this-solution
+[react-solution-explainer]: ../react-testing-library/intro.mdx#this-solution
 
 **What this library is not**:
 
 1. A test runner or framework.
 2. Specific to a testing framework.
 
 We recommend Jest as our preference. You can checkout
-[Using Without Jest](../react-testing-library/setup#using-without-jest) if
+[Using Without Jest](react-testing-library/setup.mdx#using-without-jest) if
 you're looking to use another framework.
diff --git a/docs/preact-testing-library/learn.mdx b/docs/preact-testing-library/learn.mdx
@@ -14,18 +14,18 @@ Take note of the
 If you're still hungry for more at this point than checkout:
 
 - The dom-testing-library:
- - [Introduction](../intro.mdx)
- - [Queries](../dom-testing-library/api-queries)
- - [Firing Events](../dom-testing-library/api-events)
- - [Async Utilities](../dom-testing-library/api-async.mdx)
- - [Helpers](../dom-testing-library/api-helpers)
- - [FAQ](../dom-testing-library/faq.mdx)
+ - [Introduction](intro.mdx)
+ - [Queries](dom-testing-library/api-queries.mdx)
+ - [Firing Events](dom-testing-library/api-events.mdx)
+ - [Async Utilities](dom-testing-library/api-async.mdx)
+ - [Helpers](dom-testing-library/api-helpers.mdx)
+ - [FAQ](dom-testing-library/faq.mdx)
 - The react-testing-library:
- - [API](../react-testing-library/api.mdx)
- - [Example](../react-testing-library/example-intro.mdx)
- - [Migrate from Enzyme](../react-testing-library/migrate-from-enzyme.mdx)
+ - [API](react-testing-library/api.mdx)
+ - [Example](react-testing-library/example-intro.mdx)
+ - [Migrate from Enzyme](react-testing-library/migrate-from-enzyme.mdx)
  - [Sandbox](https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples)
- - [FAQ](../react-testing-library/faq.mdx)
+ - [FAQ](react-testing-library/faq.mdx)
 - This YouTube video by LevelUpTuts called
  [What is React Testing Library?](https://youtu.be/JKOwJUM4_RM)
 - Extending Jest with

diff --git a/docs/react-testing-library/api.mdx b/docs/react-testing-library/api.mdx
@@ -119,7 +119,7 @@ See [helpers](dom-testing-library/api-helpers.mdx) for guidance on using utility
 functions to create custom queries.
 
 Custom queries can also be added globally by following the
-[custom render guide](./setup#custom-render).
+[custom render guide](setup.mdx#custom-render).
 
 ## `render` Result
 

diff --git a/docs/react-testing-library/example-intro.mdx b/docs/react-testing-library/example-intro.mdx
@@ -131,7 +131,7 @@ test('handlers server error', async () => {
 
 ### Arrange
 
-The [`render`](./api#render) method renders a React element into the DOM.
+The [`render`](api.mdx#render) method renders a React element into the DOM.
 
 ```jsx
 render(<Fetch url="/greeting" />)

diff --git a/docs/react-testing-library/faq.mdx b/docs/react-testing-library/faq.mdx
@@ -205,9 +205,9 @@ This warning is usually caused by an async operation causing an update after the
 test has already finished. There are 2 approaches to resolve it:
 
 1. Wait for the result of the operation in your test by using one of
- [the async utilities](/docs/dom-testing-library/api-async) like
- [wait](/docs/dom-testing-library/api-async#wait) or a
- [`find*` query](/docs/dom-testing-library/api-queries#findby). For example:
+ [the async utilities](dom-testing-library/api-async.mdx) like
+ [wait](dom-testing-library/api-async.mdx#wait) or a
+ [`find*` query](dom-testing-library/api-queries.mdx#findby). For example:
  `const userAddress = await findByLabel(/address/i)`.
 2. Mocking out the asynchronous operation so that it doesn't trigger state
  updates.

diff --git a/docs/react-testing-library/intro.mdx b/docs/react-testing-library/intro.mdx
@@ -55,14 +55,14 @@ This library is a replacement for [Enzyme](http://airbnb.io/enzyme/). While you
 _can_ follow these guidelines using Enzyme itself, enforcing this is harder
 because of all the extra utilities that Enzyme provides (utilities which
 facilitate testing implementation details). Read more about this in
-[the FAQ](./faq).
+[the FAQ](react-testing-library/faq.mdx).
 
 **What this library is not**:
 
 1. A test runner or framework
 2. Specific to a testing framework (though we recommend Jest as our preference,
  the library works with any framework. See
- [Using Without Jest](./setup#using-without-jest))
+ [Using Without Jest](setup.mdx#using-without-jest))
 
 > NOTE: This library is built on top of
 > [`DOM Testing Library`](dom-testing-library/intro.mdx) which is where most of

diff --git a/docs/react-testing-library/migrate-from-enzyme.mdx b/docs/react-testing-library/migrate-from-enzyme.mdx
@@ -64,7 +64,7 @@ work can be done collaboratively and spread over some time.
 ## Install React Testing Library
 
 You can check
-[this page](https://testing-library.com/docs/react-testing-library/setup) for
+[this page](setup.mdx) for
 the complete installation and setup guide.
 
 Here is what you should do, first you need to install the React Testing Library:
@@ -201,7 +201,7 @@ automatically cleans up the output for each test, so you don't need to call
 The other thing that you might notice is `getByRole` which has `heading` as its
 value. `heading` is the accessible role of the `h1` element. You can learn more
 about them on
-[queries](https://testing-library.com/docs/dom-testing-library/api-queries#byrole)
+[queries](dom-testing-library/api-queries.mdx#byrole)
 documentation page. One of the things people quickly learn to love about Testing
 Library is how it encourages you to write more accessible applications (because
 if it's not accessible, then it's harder to test).
@@ -245,7 +245,7 @@ like `<div>` do not have one. You could use different approaches to access the
 `<div>` element, but we recommend trying to access elements by their implicit
 `role` to make sure your component is accessible by people with disabilities and
 those who are using screen readers. This
-[section](https://testing-library.com/docs/dom-testing-library/api-queries#byrole)
+[section](dom-testing-library/api-queries.mdx#byrole)
 of the query page might help you to understand better.
 
 > Keep in mind that a `<form>` must have a `name` attribute in order to have an
@@ -260,12 +260,12 @@ it's not recommended for the reasons stated in this paragraph).
 
 We made some handy query APIs which help you to access the component elements
 very efficiently, and you can see the
-[list of available queries](https://testing-library.com/docs/dom-testing-library/api-queries)
+[list of available queries](dom-testing-library/api-queries.mdx)
 in detail.
 
 Something else that people have a problem with is that they're not sure which
 query should they use, luckily we have a great page which explains
-[which query to use](https://testing-library.com/docs/guide-which-query), so
+[which query to use](guide-which-query.mdx), so
 don't forget to check it out!
 
 If you still have a problem with the React Testing Library's queries, and you're
@@ -295,7 +295,7 @@ to handle fewer things!
 There are two ways to simulate user events, one is a perfect library named
 [`user-event`](https://github.com/testing-library/user-event), and the other way
 is to use
-[`fireEvent`](https://testing-library.com/docs/dom-testing-library/api-events).
+[`fireEvent`](dom-testing-library/api-events.mdx).
 `user-event` is actually built on top of `fireEvent` which simply calls
 `dispatchEvent` on the element given. However, `user-event` is generally
 recommended because it ensures that all the events are fired in the correct
@@ -371,4 +371,4 @@ Then make your test do that.
 Generally, you should avoid mocking out components. However, if you need to,
 then it's pretty trivial using
 [Jest's mocking](https://jestjs.io/docs/en/manual-mocks.html) feature. (see our
-[FAQ](https://testing-library.com/docs/react-testing-library/faq))
+[FAQ](react-testing-library/faq.mdx))
diff --git a/docs/react-testing-library/setup.mdx b/docs/react-testing-library/setup.mdx
@@ -28,14 +28,12 @@ make your test util file accessible without using relative paths.
 The example below sets up data providers using the [`wrapper`](api.mdx#wrapper)
 option to `render`.
 
-```diff
-// my-component.test.js
+```diff title="my-component.test.js"
 - import { render, fireEvent } from '@testing-library/react';
 + import { render, fireEvent } from '../test-utils';
 ```
 
-```js
-// test-utils.js
+```js title="test-utils.js"
 import React from 'react'
 import { render } from '@testing-library/react'
 import { ThemeProvider } from 'my-ui-lib'
@@ -73,8 +71,7 @@ export { customRender as render }
 
 You can use CommonJS modules instead of ES modules, which should work in Node:
 
-```js
-// test-utils.js
+```js title="test-utils.js"
 const rtl = require('@testing-library/react')
 
 const customRender = (ui, options) =>
@@ -99,8 +96,8 @@ module.exports = {
 > implementation details.
 
 You can define your own custom queries as described in the example in the
-[Helpers API](/docs/dom-testing-library/api-helpers) documentation, or via the
-[`buildQueries`](/docs/dom-testing-library/api-helpers#buildqueries) helper.
+[Helpers API](dom-testing-library/api-helpers.mdx) documentation, or via the
+[`buildQueries`](dom-testing-library/api-helpers.mdx#buildqueries) helper.
 Then you can use them in any render call using the `queries` option. To make the
 custom queries available globally, you can add them to your custom render method
 as shown below.
@@ -110,8 +107,7 @@ elements by `data-cy`, a "test ID" convention mentioned in the
 [Cypress.io](https://docs.cypress.io/guides/references/best-practices.html#Selecting-Elements)
 documentation.
 
-```js
-// custom-queries.js
+```js title="custom-queries.js"
 import { queryHelpers, buildQueries } from '@testing-library/react'
 
 // The queryAllByAttribute is a shortcut for attribute-based matchers
@@ -149,7 +145,7 @@ passing a [`queries`](api.mdx#render-options) option.
 If you want to add custom queries globally, you can do this by defining a custom
 render method:
 
-```js
+```js title="test-utils.js"
 // test-utils.js
 import { render, queries } from '@testing-library/react'
 import * as customQueries from './custom-queries'
@@ -181,14 +177,12 @@ Jest `moduleDirectories` option.
 This will make all the `.js` files in the test-utils directory importable
 without `../`.
 
-```diff
-// my-component.test.js
+```diff title="my-component.test.js"
 - import { render, fireEvent } from '../test-utils';
 + import { render, fireEvent } from 'test-utils';
 ```
 
-```diff
-// jest.config.js
+```diff title="jest.config.js"
 module.exports = {
  moduleDirectories: [
  'node_modules',
@@ -202,8 +196,7 @@ module.exports = {
 
 _Typescript config needs to be updated as follow:_
 
-```diff
-// tsconfig.json
+```diff title="tsconfig.json"
 {
  "compilerOptions": {
  // ...,
@@ -255,8 +248,7 @@ npm install --save-dev jest-environment-jsdom-fifteen
 
 Then specify `jest-environment-jsdom-fifteen` as the `testEnvironment`:
 
-```diff
- // jest.config.js
+```diff title="jest.config.js"
  module.exports = {
 + testEnvironment: 'jest-environment-jsdom-fifteen',
  // ... other options ...