Skip to content

Add getAllByTestId & queryAllByTestId helper functions #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .all-contributorsrc
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,16 @@
"contributions": [
"platform"
]
},
{
"login": "bahdcoder",
"name": "Kati Frantz",
"avatar_url": "https://avatars2.githubusercontent.com/u/19477966?v=4",
"profile": "https://github.com/bahdcoder",
"contributions": [
"code",
"test"
]
}
]
}
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
[![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]

[![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors)
[![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square)](#contributors)
[![PRs Welcome][prs-badge]][prs]
[![Code of Conduct][coc-badge]][coc]

Expand Down Expand Up @@ -564,6 +564,7 @@ Thanks goes to these people ([emoji key][emojis]):
<!-- prettier-ignore -->
| [<img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;"/><br /><sub><b>Kent C. Dodds</b></sub>](https://kentcdodds.com)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Documentation") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=kentcdodds "Tests") | [<img src="https://avatars1.githubusercontent.com/u/2430381?v=4" width="100px;"/><br /><sub><b>Ryan Castner</b></sub>](http://audiolion.github.io)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=audiolion "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/8008023?v=4" width="100px;"/><br /><sub><b>Daniel Sandiego</b></sub>](https://www.dnlsandiego.com)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=dnlsandiego "Code") | [<img src="https://avatars2.githubusercontent.com/u/12592677?v=4" width="100px;"/><br /><sub><b>Paweł Mikołajczyk</b></sub>](https://github.com/Miklet)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=Miklet "Code") | [<img src="https://avatars3.githubusercontent.com/u/464978?v=4" width="100px;"/><br /><sub><b>Alejandro Ñáñez Ortiz</b></sub>](http://co.linkedin.com/in/alejandronanez/)<br />[📖](https://github.com/kentcdodds/react-testing-library/commits?author=alejandronanez "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1402095?v=4" width="100px;"/><br /><sub><b>Matt Parrish</b></sub>](https://github.com/pbomb)<br />[🐛](https://github.com/kentcdodds/react-testing-library/issues?q=author%3Apbomb "Bug reports") [💻](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Code") [📖](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Documentation") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=pbomb "Tests") | [<img src="https://avatars1.githubusercontent.com/u/1288694?v=4" width="100px;"/><br /><sub><b>Justin Hall</b></sub>](https://github.com/wKovacs64)<br />[📦](#platform-wKovacs64 "Packaging/porting to new platform") |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| [<img src="https://avatars2.githubusercontent.com/u/19477966?v=4" width="100px;"/><br /><sub><b>Kati Frantz</b></sub>](https://github.com/bahdcoder)<br />[💻](https://github.com/kentcdodds/react-testing-library/commits?author=bahdcoder "Code") [⚠️](https://github.com/kentcdodds/react-testing-library/commits?author=bahdcoder "Tests") |

<!-- ALL-CONTRIBUTORS-LIST:END -->

Expand Down
2 changes: 2 additions & 0 deletions src/__tests__/__snapshots__/element-queries.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ exports[`get throws a useful error message 3`] = `"Unable to find an element wit

exports[`get throws a useful error message 4`] = `"Unable to find an element by: [data-testid=\\"LucyRicardo\\"]"`;

exports[`getAllByTestId throws a useful error message if no matching elements are found 1`] = `"Unable to find any elements by: [data-testid=\\"LucyRicardo\\"]"`;

exports[`label with no form control 1`] = `"Found a label with the text of: alone, however no form control was found associated to that label. Make sure you're using the \\"for\\" attribute or \\"aria-labelledby\\" attribute correctly."`;

exports[`totally empty label 1`] = `"Found a label with the text of: , however no form control was found associated to that label. Make sure you're using the \\"for\\" attribute or \\"aria-labelledby\\" attribute correctly."`;
27 changes: 27 additions & 0 deletions src/__tests__/element-queries.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,33 @@ test('query can return null', () => {
expect(queryByText('LucyRicardo')).toBeNull()
})

test('queryAllByTestId returns an empty node list', () => {
const {queryAllByTestId} = render(<div />)
const results = queryAllByTestId('LucyRicardo')
expect(results).toBeInstanceOf(NodeList)
expect(results.length).toBe(0)
})

test('getAllByTestId throws a useful error message if no matching elements are found', () => {
const {getAllByTestId} = render(<div />)
expect(() => getAllByTestId('LucyRicardo')).toThrowErrorMatchingSnapshot()
})

test('getAllByTestId returns a node list of elements if they are found', () => {
const {getAllByTestId} = render(
<div>
<ul>
<li data-testid="LucyRicardo" />
<li data-testid="LucyRicardo" />
</ul>
</div>,
)

const results = getAllByTestId('LucyRicardo')
expect(results).toBeInstanceOf(NodeList)
expect(results.length).toBe(2)
})

test('get throws a useful error message', () => {
const {getByLabelText, getByPlaceholderText, getByText, getByTestId} = render(
<div />,
Expand Down
18 changes: 18 additions & 0 deletions src/queries.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@ function queryByTestId(container, id) {
return container.querySelector(getDataTestIdSelector(id))
}

function queryAllByTestId(container, id) {
return container.querySelectorAll(getDataTestIdSelector(id))
}

function getDataTestIdSelector(id) {
return `[data-testid="${id}"]`
}
Expand Down Expand Up @@ -94,6 +98,18 @@ function getByTestId(container, id, ...rest) {
return el
}

function getAllByTestId(container, id, ...rest) {
const elements = queryAllByTestId(container, id, ...rest)

if (elements.length === 0) {
throw new Error(
`Unable to find any elements by: ${getDataTestIdSelector(id)}`,
)
}

return elements
}

function getByPlaceholderText(container, text, ...rest) {
const el = queryByPlaceholderText(container, text, ...rest)
if (!el) {
Expand Down Expand Up @@ -138,6 +154,8 @@ export {
getByLabelText,
queryByTestId,
getByTestId,
queryAllByTestId,
getAllByTestId,
}

/* eslint complexity:["error", 14] */