What if my app is localized and I don't have access to the text in test?
++ What if my app is localized and I don't have access to the text in test? +
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).
-
I really don't like data-testids, but none of the other queries make sense. Do I have to use a data-testid?
++ I really don't like data-testids, but none of the other queries make sense. Do + I have to use a data-testid? +
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
-
+
diff --git a/docs/example-input-event.mdx b/docs/example-input-event.mdx
index 29f6663c3..689439bda 100644
--- a/docs/example-input-event.mdx
+++ b/docs/example-input-event.mdx
@@ -11,16 +11,16 @@ 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)
@@ -28,13 +28,7 @@ function CostInput() {
setValue(getReturnValue(noDollarSign))
}
- return (
-
- )
+ return
}
const setup = () => {
diff --git a/docs/example-react-context.mdx b/docs/example-react-context.mdx
index bc457a12c..2864f3261 100644
--- a/docs/example-react-context.mdx
+++ b/docs/example-react-context.mdx
@@ -53,7 +53,7 @@ test('NameProvider composes full name from first, last', () => {
}
customRender(
- {value => Received: {value}}
+ {(value) => Received: {value}}
,
{ providerProps }
)
diff --git a/docs/example-react-modal.mdx b/docs/example-react-modal.mdx
index a494f2dec..b2125fe1a 100644
--- a/docs/example-react-modal.mdx
+++ b/docs/example-react-modal.mdx
@@ -23,7 +23,7 @@ const Modal = ({ onClose, children }) => {
return ReactDOM.createPortal(
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?
++ 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? +
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. - [guiding-principle]: https://twitter.com/kentcdodds/status/977018512689455106 diff --git a/docs/example-codesandbox.mdx b/docs/example-codesandbox.mdx index 7d54c6442..9fca1aef9 100644 --- a/docs/example-codesandbox.mdx +++ b/docs/example-codesandbox.mdx @@ -8,7 +8,17 @@ You can find runnable examples for many common use cases on Codesandbox. [](https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples/tree/master/) - + ## Playground diff --git a/docs/example-drag.mdx b/docs/example-drag.mdx index 2024ebfe7..2d0fcecff 100644 --- a/docs/example-drag.mdx +++ b/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) }) diff --git a/docs/example-external.mdx b/docs/example-external.mdx index c85b88aaa..a5f54a59e 100644 --- a/docs/example-external.mdx +++ b/docs/example-external.mdx @@ -20,5 +20,10 @@ sidebar_label: External Examples Tolinski -
+
diff --git a/docs/example-input-event.mdx b/docs/example-input-event.mdx
index 29f6663c3..689439bda 100644
--- a/docs/example-input-event.mdx
+++ b/docs/example-input-event.mdx
@@ -11,16 +11,16 @@ 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)
@@ -28,13 +28,7 @@ function CostInput() {
setValue(getReturnValue(noDollarSign))
}
- return (
-
- )
+ return
}
const setup = () => {
diff --git a/docs/example-react-context.mdx b/docs/example-react-context.mdx
index bc457a12c..2864f3261 100644
--- a/docs/example-react-context.mdx
+++ b/docs/example-react-context.mdx
@@ -53,7 +53,7 @@ test('NameProvider composes full name from first, last', () => {
}
customRender(
-
e.stopPropagation()}>
+
e.stopPropagation()}>
{children}
diff --git a/docs/example-react-transition-group.mdx b/docs/example-react-transition-group.mdx index b9424265f..763638125 100644 --- a/docs/example-react-transition-group.mdx +++ b/docs/example-react-transition-group.mdx @@ -20,7 +20,7 @@ function Fade({ children, ...props }) { function HiddenMessage({ initialShow }) { const [show, setShow] = useState(initialShow || false) - const toggle = () => setShow(prevState => !prevState) + const toggle = () => setShow((prevState) => !prevState) return (
diff --git a/docs/example-react-transition-group.mdx b/docs/example-react-transition-group.mdx index b9424265f..763638125 100644 --- a/docs/example-react-transition-group.mdx +++ b/docs/example-react-transition-group.mdx @@ -20,7 +20,7 @@ function Fade({ children, ...props }) { function HiddenMessage({ initialShow }) { const [show, setShow] = useState(initialShow || false) - const toggle = () => setShow(prevState => !prevState) + const toggle = () => setShow((prevState) => !prevState) return (
@@ -33,7 +33,7 @@ function HiddenMessage({ initialShow }) {
jest.mock('react-transition-group', () => {
const FakeTransition = jest.fn(({ children }) => children)
- const FakeCSSTransition = jest.fn(props =>
+ const FakeCSSTransition = jest.fn((props) =>
props.in ? {props.children} : null
)
return { CSSTransition: FakeCSSTransition, Transition: FakeTransition }
@@ -70,7 +70,7 @@ function Fade({ children, ...props }) {
function HiddenMessage({ initialShow }) {
const [show, setShow] = useState(initialShow || false)
- const toggle = () => setShow(prevState => !prevState)
+ const toggle = () => setShow((prevState) => !prevState)
return (
diff --git a/docs/preact-testing-library/api.mdx b/docs/preact-testing-library/api.mdx
index a9ed5da28..c8ac61d0d 100644
--- a/docs/preact-testing-library/api.mdx
+++ b/docs/preact-testing-library/api.mdx
@@ -16,8 +16,8 @@ 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
-can use.
+[documentation](dom-testing-library/api-queries.mdx) to see what goodies you can
+use.
## `render`
@@ -33,20 +33,20 @@ const { results } = render(