diff --git a/README.md b/README.md index 22a9d3ff..ee3bf6cf 100644 --- a/README.md +++ b/README.md @@ -91,6 +91,7 @@ facilitate testing implementation details). Read more about this in * [`prettyDOM`](#prettydom) * [`TextMatch`](#textmatch) * [`query` APIs](#query-apis) +* [`queryAll` and `getAll` APIs](#queryall-and-getall-apis) * [Examples](#examples) * [FAQ](#faq) * [Other Solutions](#other-solutions) @@ -563,6 +564,16 @@ const submitButton = queryByText('submit') expect(submitButton).toBeNull() // it doesn't exist ``` +## `queryAll` and `getAll` APIs + +Each of the `query` APIs have a corresponsing `queryAll` version that always returns an Array of matching nodes. `getAll` is the same but throws when the array has a length of 0. + +```javascript +const submitButtons = queryAllByText('submit') +expect(submitButtons).toHaveLength(3) // expect 3 elements +expect(submitButtons[0]).toBeInTheDOM() +``` + ## Examples You'll find examples of testing with different libraries in diff --git a/package.json b/package.json index 5a38f46a..02c7f563 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "author": "Kent C. Dodds (http://kentcdodds.com/)", "license": "MIT", "dependencies": { - "dom-testing-library": "^2.0.0", + "dom-testing-library": "^2.3.1", "wait-for-expect": "^0.5.0" }, "devDependencies": { diff --git a/src/index.js b/src/index.js index 8733b67e..c23b88bb 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,6 @@ import ReactDOM from 'react-dom' import {Simulate} from 'react-dom/test-utils' -import {bindElementToQueries, prettyDOM} from 'dom-testing-library' +import {getQueriesForElement, prettyDOM} from 'dom-testing-library' function render(ui, {container = document.createElement('div')} = {}) { ReactDOM.render(ui, container) @@ -14,7 +14,7 @@ function render(ui, {container = document.createElement('div')} = {}) { // Intentionally do not return anything to avoid unnecessarily complicating the API. // folks can use all the same utilities we return in the first place that are bound to the container }, - ...bindElementToQueries(container), + ...getQueriesForElement(container), } } diff --git a/typings/index.d.ts b/typings/index.d.ts index fb8d10b7..e9cbcd02 100644 --- a/typings/index.d.ts +++ b/typings/index.d.ts @@ -1,4 +1,14 @@ import {Simulate as ReactSimulate} from 'react-dom/test-utils' +import { + AllByAttribute, + AllByText, + BoundFunction, + GetByAttribute, + GetByText, + getQueriesForElement, + QueryByAttribute, + QueryByText, +} from 'dom-testing-library' type TextMatchFunction = (content: string, element: HTMLElement) => boolean type TextMatch = string | RegExp | TextMatchFunction @@ -8,38 +18,33 @@ type TextMatchOptions = { collapseWhitespace?: boolean } -interface RenderResult { +interface GetsAndQueries { + queryByTestId: BoundFunction + queryAllByTestId: BoundFunction + getByTestId: BoundFunction + getAllByTestId: BoundFunction + queryByText: BoundFunction + queryAllByText: BoundFunction + getByText: BoundFunction + getAllByText: BoundFunction + queryByPlaceholderText: BoundFunction + queryAllByPlaceholderText: BoundFunction + getByPlaceholderText: BoundFunction + getAllByPlaceholderText: BoundFunction + queryByLabelText: BoundFunction + queryAllByLabelText: BoundFunction + getByLabelText: BoundFunction + getAllByLabelText: BoundFunction + queryByAltText: BoundFunction + queryAllByAltText: BoundFunction + getByAltText: BoundFunction + getAllByAltText: BoundFunction +} + +interface RenderResult extends GetsAndQueries { container: HTMLDivElement rerender: (ui: React.ReactElement) => void unmount: VoidFunction - queryByTestId: ( - id: TextMatch, - options?: TextMatchOptions, - ) => HTMLElement | null - getByTestId: (id: TextMatch, options?: TextMatchOptions) => HTMLElement - queryByText: (id: TextMatch, options?: TextMatchOptions) => HTMLElement | null - getByText: (text: TextMatch, options?: TextMatchOptions) => HTMLElement - queryByPlaceholderText: ( - id: TextMatch, - options?: TextMatchOptions, - ) => HTMLElement | null - getByPlaceholderText: ( - text: TextMatch, - options?: TextMatchOptions, - ) => HTMLElement - queryByLabelText: ( - text: TextMatch, - options?: TextMatchOptions, - ) => HTMLElement | null - getByLabelText: ( - id: TextMatch, - options?: {selector?: string} & TextMatchOptions, - ) => HTMLElement - queryByAltText: ( - text: TextMatch, - options?: TextMatchOptions, - ) => HTMLElement | null - getByAltText: (text: TextMatch, options?: TextMatchOptions) => HTMLElement } export function render( @@ -147,3 +152,5 @@ export const fireEvent: FireFunction & FireObject export function renderIntoDocument(ui: React.ReactElement): RenderResult export function cleanup(): void + +export function getQueriesForElement(element: HTMLElement): GetsAndQueries