Dom-testing-library: Cannot getByText using —
DOM Testing Libraryversion: 🤷♀️ Create-React-Appnodeversion: v12.15.0npm(oryarn) version: v6.13.4
Relevant code or config:
// Status.tsx
export default function Status ({ status }: StatusProps) {
return (
<div className='Status'>
<span> { status === 'NO_ATTEMPT' ? <>—</> : 'Log'}</span>
</div>
)
}
What you did:
// Status.test.tsx
test('should render mdash', () => {
const { getByText } = render(<Status status={'NO_ATTEMPT'} />)
expect(getByText(/—/i)).toBeInTheDocument()
})
What happened:
status should render `Log` text for each status value except NO_ATTEMPT
Unable to find an element with the text: /—/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
<body>
<div />
<div />
<div />
<div>
<div
class="Status"
>
<i
aria-hidden="true"
class="root-41"
data-icon-name="CircleFill"
style="color: darkgrey;"
title="Did not attempt"
>
</i>
<span>
—
</span>
</div>
</div>
</body>
12 | expect(getByText(/Log/i)).toBeInTheDocument()
13 | } else {
> 14 | expect(getByText(/—/)).toBeInTheDocument()
| ^
15 | }
16 | unmount()
17 | })
at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:34:12)
at node_modules/@testing-library/dom/dist/query-helpers.js:71:38
at getByText (node_modules/@testing-library/dom/dist/query-helpers.js:54:17)
at forEach (src/tests/Status.test.tsx:14:14)
at Array.forEach (<anonymous>)
at Object.<anonymous> (src/tests/Status.test.tsx:9:16)
Reproduction:
https://codesandbox.io/s/react-testing-library-demo-q7ufl
Problem description:
Cannot match mdash text
Suggested solution:
Ethan-Arrowood
All 4 comments
Hi @Ethan-Arrowood,
Try this: https://codesandbox.io/s/react-testing-library-demo-fllkl
expect(getByText(/—/i)).toBeInTheDocument();
kentcdodds
on 17 Mar 2020
👍1
Thank you @kentcdodds ❤️works like a charm
Any particular reason why the HTML codes didn't work? was it trying to literally match the string — instead of the character it represents?
Ethan-Arrowood
on 17 Mar 2020
was it trying to literally match the string
—instead of the character it represents?
Yes. HTML is kinda quirky, and your users aren't going to look for — so I'm ok with having your test use — instead.
kentcdodds
on 17 Mar 2020
👍2
Thank you!
Ethan-Arrowood
on 17 Mar 2020
Was this page helpful?
0 / 5 - 0 ratings
Related issues
EvgenyOrekhov
·
3Comments
ricardozv28
·
3Comments
kelly-tock
·
4Comments
dlbnco
·
3Comments
sompylasar
·
3Comments
Most helpful comment
Yes. HTML is kinda quirky, and your users aren't going to look for
—so I'm ok with having your test use—instead.