fix: format docs script (#702)

Author: MatanBobi

docs/dom-testing-library/api-async.mdx

@@ -106,14 +106,14 @@ el.parentElement.removeChild(el)
 or an empty array:
 
 ```javascript
-waitForElementToBeRemoved(null).catch(err => console.log(err))
-waitForElementToBeRemoved(queryByText(/not here/i)).catch(err =>
+waitForElementToBeRemoved(null).catch((err) => console.log(err))
+waitForElementToBeRemoved(queryByText(/not here/i)).catch((err) =>
   console.log(err)
 )
-waitForElementToBeRemoved(queryAllByText(/not here/i)).catch(err =>
+waitForElementToBeRemoved(queryAllByText(/not here/i)).catch((err) =>
   console.log(err)
 )
-waitForElementToBeRemoved(() => getByText(/not here/i)).catch(err =>
+waitForElementToBeRemoved(() => getByText(/not here/i)).catch((err) =>
   console.log(err)
 )
 
@@ -165,7 +165,7 @@ changed:
 const container = document.createElement('div')
 waitForDomChange({ container })
   .then(() => console.log('DOM changed!'))
-  .catch(err => console.log(`Error you need to deal with: ${err}`))
+  .catch((err) => console.log(`Error you need to deal with: ${err}`))
 container.append(document.createElement('p'))
 // if 👆 was the only code affecting the container and it was not run,
 // waitForDomChange would throw an error
@@ -179,7 +179,7 @@ container
 ```javascript
 const container = document.createElement('div')
 container.setAttribute('data-cool', 'true')
-waitForDomChange({ container }).then(mutationsList => {
+waitForDomChange({ container }).then((mutationsList) => {
   const mutation = mutationsList[0]
   console.log(
     `was cool: ${mutation.oldValue}\ncurrently cool: ${mutation.target.dataset.cool}`

docs/dom-testing-library/api-configuration.mdx

@@ -3,8 +3,8 @@ id: api-configuration
 title: Configuration
 ---
 
-import Tabs from '@theme/Tabs'; 
-import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
 
 ## Configuration
 
@@ -50,12 +50,13 @@ option.
 screen.getByTestId('foo', { suggest: false }) // will not throw a suggestion
 ```
 
-`testIdAttribute`: The attribute used by [`getByTestId`](api-queries.mdx#bytestid)
-and related queries. Defaults to `data-testid`.
+`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.mdx#getby) or [`getAllBy*`](api-queries.mdx#getallby) fail. Takes
-the error message and container object as arguments.
+[`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`
 utilities. Defaults to 1000ms.

docs/dom-testing-library/api-events.mdx

@@ -3,8 +3,8 @@ id: api-events
 title: Firing Events
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
 
 > Most projects have a few use cases for `fireEvent`, but the majority of the
 > time you should probably use
@@ -149,20 +149,20 @@ bound callback.
   }>
   <TabItem value="react">
 
-  ```jsx
-  import { render, screen, fireEvent } from '@testing-library/react'
+```jsx
+import { render, screen, fireEvent } from '@testing-library/react'
 
-  const Button = ({ onClick, children }) => (
-    <button onClick={onClick}>{children}</button>
-  )
+const Button = ({ onClick, children }) => (
+  <button onClick={onClick}>{children}</button>
+)
 
-  test('calls onClick prop when clicked', () => {
-    const handleClick = jest.fn()
-    render(<Button onClick={handleClick}>Click Me</Button>)
-    fireEvent.click(screen.getByText(/click me/i))
-    expect(handleClick).toHaveBeenCalledTimes(1)
-  })
-  ```
+test('calls onClick prop when clicked', () => {
+  const handleClick = jest.fn()
+  render(<Button onClick={handleClick}>Click Me</Button>)
+  fireEvent.click(screen.getByText(/click me/i))
+  expect(handleClick).toHaveBeenCalledTimes(1)
+})
+```
 
   </TabItem>
   </Tabs>

docs/dom-testing-library/api-helpers.mdx

@@ -3,8 +3,8 @@ id: api-helpers
 title: Helpers
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
 
 ## Custom Queries
 
@@ -68,8 +68,7 @@ module.exports = {
 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](react-testing-library/setup.mdx#add-custom-queries)
+See the [Add custom queries](react-testing-library/setup.mdx#add-custom-queries)
 section of the custom render guide for example usage.
 
 ### Using other assertion libraries
@@ -138,32 +137,32 @@ could do:
   }>
   <TabItem value="native">
 
-  ```js
-  import { within } from '@testing-library/dom'
+```js
+import { within } from '@testing-library/dom'
 
-  const { getByText } = within(document.getElementById('messages'))
-  const helloMessage = getByText('hello')
-  ```
+const { getByText } = within(document.getElementById('messages'))
+const helloMessage = getByText('hello')
+```
 
   </TabItem>
   <TabItem value="react">
 
-  ```jsx
-  import { render, within } from '@testing-library/react'
+```jsx
+import { render, within } from '@testing-library/react'
 
-  const { getByLabelText } = render(<MyComponent />)
-  const signinModal = getByLabelText('Sign In')
-  within(signinModal).getByPlaceholderText('Username')
-  ```
+const { getByLabelText } = render(<MyComponent />)
+const signinModal = getByLabelText('Sign In')
+within(signinModal).getByPlaceholderText('Username')
+```
 
   </TabItem>
   <TabItem value="cypress">
 
-  ```js
-  cy.get('form').within(() => {
-    cy.findByText('Button Text').should('be.disabled')
-  })
-  ```
+```js
+cy.get('form').within(() => {
+  cy.findByText('Button Text').should('be.disabled')
+})
+```
 
   </TabItem>
   </Tabs>

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

@@ -3,8 +3,8 @@ id: api-queries
 title: Queries
 ---
 
-import Tabs from '@theme/Tabs'; 
-import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
 
 ## Variants
 
@@ -1006,7 +1006,7 @@ To override normalization to remove some Unicode characters whilst keeping some
 
 ```javascript
 screen.getByText('text', {
-  normalizer: str =>
+  normalizer: (str) =>
     getDefaultNormalizer({ trim: false })(str).replace(/[\u200E-\u200F]*/g, ''),
 })
 ```

docs/dom-testing-library/cheatsheet.mdx

@@ -77,25 +77,29 @@ See [Which query should I use?](guide-which-query.mdx)
 
 ## Async
 
-See [Async API](dom-testing-library/api-async.mdx). Remember to `await` or `.then()`
-the result of async functions in your tests!
+See [Async API](dom-testing-library/api-async.mdx). Remember to `await` or
+`.then()` the result of async functions in your tests!
 
-- **waitFor** (Promise) retry the function within until it stops throwing or times
-  out
+- **waitFor** (Promise) retry the function within until it stops throwing or
+  times out
 - **waitForElementToBeRemoved** (Promise) retry the function until it no longer
   returns a DOM node
 
 > **Deprecated since v7.0.0:**
-> - **wait** (Promise) retry the function within until it stops throwing or times
-> - **waitForElement** (Promise) retry the function until it returns an element or
->  an array of elements
->  - `findBy` and `findAllBy` queries are async and retry until either a timeout
->    or if the query returns successfully; they wrap `waitForElement`
-> - **waitForDomChange** (Promise) retry the function each time the DOM is changed
+>
+> - **wait** (Promise) retry the function within until it stops throwing or
+>   times
+> - **waitForElement** (Promise) retry the function until it returns an element
+>   or an array of elements
+> - `findBy` and `findAllBy` queries are async and retry until either a timeout
+>   or if the query returns successfully; they wrap `waitForElement`
+> - **waitForDomChange** (Promise) retry the function each time the DOM is
+>   changed
 
 ## Events
 
-See [Considerations for fireEvent](guide-events.mdx), [Events API](api-events.mdx)
+See [Considerations for fireEvent](guide-events.mdx),
+[Events API](api-events.mdx)
 
 - **fireEvent** trigger DOM event: `fireEvent(node, event)`
 - **fireEvent.\*** helpers for default event types

docs/dom-testing-library/faq.mdx

@@ -27,7 +27,9 @@ As you write your tests, keep in mind:
 
 <details>
 
-<summary>What if my app is localized and I don't have access to the text in test?</summary>
+<summary>
+  What if my app is localized and I don't have access to the text in test?
+</summary>
 
 This is fairly common. Our first bit of advice is to try to get the default text
 used in your tests. That will make everything much easier (more than just using
@@ -38,7 +40,10 @@ with `data-testid`s (which is not bad anyway).
 
 <details>
 
-<summary>I really don't like data-testids, but none of the other queries make sense. Do I have to use a data-testid?</summary>
+<summary>
+  I really don't like data-testids, but none of the other queries make sense. Do
+  I have to use a data-testid?
+</summary>
 
 Definitely not. That said, a common reason people don't like the `data-testid`
 attribute is they're concerned about shipping that to production. I'd suggest
@@ -67,7 +72,10 @@ const rootElement = container.firstChild
 
 <details>
 
-<summary>What if I’m iterating over a list of items that I want to put the data-testid="item" attribute on. How do I distinguish them from each other?</summary>
+<summary>
+  What if I’m iterating over a list of items that I want to put the
+  data-testid="item" attribute on. How do I distinguish them from each other?
+</summary>
 
 You can make your selector just choose the one you want by including :nth-child
 in the selector.
@@ -109,7 +117,6 @@ library for more info.
 
 <!-- Links: -->
 
-
 <!-- prettier-ignore-start -->
 
 [guiding-principle]: https://twitter.com/kentcdodds/status/977018512689455106

docs/example-codesandbox.mdx

@@ -8,7 +8,17 @@ You can find runnable examples for many common use cases on Codesandbox.
 
 [![Open react-testing-library-examples](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples/tree/master/)
 
-<iframe src="https://codesandbox.io/embed/github/kentcdodds/react-testing-library-examples/tree/master/?expanddevtools=1&fontsize=13&hidenavigation=1&initialpath=%2F__tests__%2Fasync.js&module=%2Fsrc%2F__tests__%2Fasync.js&moduleview=1&previewwindow=tests&view=editor" style={{width: '100%', height:500, border:0, borderRadius: 4, overflow:'hidden'}} sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+<iframe
+  src="https://codesandbox.io/embed/github/kentcdodds/react-testing-library-examples/tree/master/?expanddevtools=1&fontsize=13&hidenavigation=1&initialpath=%2F__tests__%2Fasync.js&module=%2Fsrc%2F__tests__%2Fasync.js&moduleview=1&previewwindow=tests&view=editor"
+  style={{
+    width: '100%',
+    height: 500,
+    border: 0,
+    borderRadius: 4,
+    overflow: 'hidden',
+  }}
+  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+></iframe>
 
 ## Playground
 

docs/example-drag.mdx

@@ -57,11 +57,11 @@ function getElementClientCenter(element) {
   }
 }
 
-const getCoords = charlie =>
+const getCoords = (charlie) =>
   isElement(charlie) ? getElementClientCenter(charlie) : charlie
 
-const sleep = ms =>
-  new Promise(resolve => {
+const sleep = (ms) =>
+  new Promise((resolve) => {
     setTimeout(resolve, ms)
   })
 

docs/example-external.mdx

@@ -20,5 +20,10 @@ sidebar_label: External Examples
   Tolinski
 
 <a href="https://youtu.be/JKOwJUM4_RM">
-  <img width="200px" alt="what is react testing library" src='https://img.youtube.com/vi/JKOwJUM4_RM/0.jpg' style={{marginLeft: 36}} />
+  <img
+    width="200px"
+    alt="what is react testing library"
+    src="https://img.youtube.com/vi/JKOwJUM4_RM/0.jpg"
+    style={{ marginLeft: 36 }}
+  />
 </a>

docs/example-input-event.mdx

@@ -11,30 +11,24 @@ sidebar_label: Input Event
 > [`user-event`](ecosystem-user-event.mdx)
 
 ```jsx
-import React, {useState} from 'react'
+import React, { useState } from 'react'
 import { render, fireEvent } from '@testing-library/react'
 
 function CostInput() {
   const [value, setValue] = useState('')
 
-  removeDollarSign = value => (value[0] === '$' ? value.slice(1) : value)
-  getReturnValue = value => (value === '' ? '' : `$${value}`)
-  
-  handleChange = ev => {
+  removeDollarSign = (value) => (value[0] === '$' ? value.slice(1) : value)
+  getReturnValue = (value) => (value === '' ? '' : `$${value}`)
+
+  handleChange = (ev) => {
     ev.preventDefault()
     const inputtedValue = ev.currentTarget.value
     const noDollarSign = removeDollarSign(inputtedValue)
     if (isNaN(noDollarSign)) return
     setValue(getReturnValue(noDollarSign))
   }
 
-    return (
-      <input
-        value={value}
-        aria-label="cost-input"
-        onChange={handleChange}
-      />
-    )
+  return <input value={value} aria-label="cost-input" onChange={handleChange} />
 }
 
 const setup = () => {

docs/example-react-context.mdx

@@ -53,7 +53,7 @@ test('NameProvider composes full name from first, last', () => {
   }
   customRender(
     <NameContext.Consumer>
-      {value => <span>Received: {value}</span>}
+      {(value) => <span>Received: {value}</span>}
     </NameContext.Consumer>,
     { providerProps }
   )

docs/example-react-modal.mdx

@@ -23,7 +23,7 @@ const Modal = ({ onClose, children }) => {
 
   return ReactDOM.createPortal(
     <div onClick={onClose}>
-      <div onClick={e => e.stopPropagation()}>
+      <div onClick={(e) => e.stopPropagation()}>
         {children}
         <hr />
         <button onClick={onClose}>Close</button>