diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js
index f6c09bb6..70677e35 100644
--- a/src/__tests__/element-queries.js
+++ b/src/__tests__/element-queries.js
@@ -1,4 +1,3 @@
-import 'jest-dom/extend-expect'
import {configure} from '../config'
import {render, renderIntoDocument} from './helpers/test-utils'
diff --git a/src/__tests__/example.js b/src/__tests__/example.js
index da0bb8ba..2a8d889a 100644
--- a/src/__tests__/example.js
+++ b/src/__tests__/example.js
@@ -1,7 +1,5 @@
// query utilities:
import {getByLabelText, getByText, getByTestId, queryByTestId, wait} from '../'
-// adds special assertions like toHaveTextContent
-import 'jest-dom/extend-expect'
function getExampleDOM() {
// This is just a raw example of setting up some DOM
diff --git a/src/__tests__/helpers/test-utils.js b/src/__tests__/helpers/test-utils.js
index 71461eba..8dcff101 100644
--- a/src/__tests__/helpers/test-utils.js
+++ b/src/__tests__/helpers/test-utils.js
@@ -1,10 +1,12 @@
import {getQueriesForElement} from '../../get-queries-for-element'
-function render(html) {
- const container = document.createElement('div')
+function render(html, {container = document.createElement('div')} = {}) {
container.innerHTML = html
const containerQueries = getQueriesForElement(container)
- return {container, ...containerQueries}
+ function rerender(newHtml) {
+ return render(newHtml, {container})
+ }
+ return {container, rerender, ...containerQueries}
}
function renderIntoDocument(html) {
diff --git a/src/__tests__/queries.find.js b/src/__tests__/queries.find.js
new file mode 100644
index 00000000..facceba2
--- /dev/null
+++ b/src/__tests__/queries.find.js
@@ -0,0 +1,125 @@
+import {render} from './helpers/test-utils'
+
+test('find asynchronously finds elements', async () => {
+ const {
+ findByLabelText,
+ findAllByLabelText,
+
+ findByPlaceholderText,
+ findAllByPlaceholderText,
+
+ findByText,
+ findAllByText,
+
+ findByAltText,
+ findAllByAltText,
+
+ findByTitle,
+ findAllByTitle,
+
+ findByDisplayValue,
+ findAllByDisplayValue,
+
+ findByRole,
+ findAllByRole,
+
+ findByTestId,
+ findAllByTestId,
+ } = render(`
+
+
test text content
+
+
+

+
+
+
+ `)
+ await expect(findByLabelText('test-label')).resolves.toBeTruthy()
+ await expect(findAllByLabelText('test-label')).resolves.toHaveLength(1)
+
+ await expect(findByPlaceholderText('placeholder')).resolves.toBeTruthy()
+ await expect(findAllByPlaceholderText('placeholder')).resolves.toHaveLength(1)
+
+ await expect(findByText('test text content')).resolves.toBeTruthy()
+ await expect(findAllByText('test text content')).resolves.toHaveLength(1)
+
+ await expect(findByAltText('test alt text')).resolves.toBeTruthy()
+ await expect(findAllByAltText('test alt text')).resolves.toHaveLength(1)
+
+ await expect(findByTitle('test title')).resolves.toBeTruthy()
+ await expect(findAllByTitle('test title')).resolves.toHaveLength(1)
+
+ await expect(findByDisplayValue('display value')).resolves.toBeTruthy()
+ await expect(findAllByDisplayValue('display value')).resolves.toHaveLength(1)
+
+ await expect(findByRole('dialog')).resolves.toBeTruthy()
+ await expect(findAllByRole('dialog')).resolves.toHaveLength(1)
+
+ await expect(findByTestId('test-id')).resolves.toBeTruthy()
+ await expect(findAllByTestId('test-id')).resolves.toHaveLength(1)
+})
+
+test('find rejects when something cannot be found', async () => {
+ const {
+ findByLabelText,
+ findAllByLabelText,
+
+ findByPlaceholderText,
+ findAllByPlaceholderText,
+
+ findByText,
+ findAllByText,
+
+ findByAltText,
+ findAllByAltText,
+
+ findByTitle,
+ findAllByTitle,
+
+ findByDisplayValue,
+ findAllByDisplayValue,
+
+ findByRole,
+ findAllByRole,
+
+ findByTestId,
+ findAllByTestId,
+ } = render(``)
+
+ // I just don't want multiple lines for these.
+ // qo = queryOptions
+ // wo = waitForElementOptions
+ const qo = {} // query options
+ const wo = {timeout: 10} // wait options
+
+ await expect(findByLabelText('x', qo, wo)).rejects.toThrow('x')
+ await expect(findAllByLabelText('x', qo, wo)).rejects.toThrow('x')
+
+ await expect(findByPlaceholderText('x', qo, wo)).rejects.toThrow('x')
+ await expect(findAllByPlaceholderText('x', qo, wo)).rejects.toThrow('x')
+
+ await expect(findByText('x', qo, wo)).rejects.toThrow('x')
+ await expect(findAllByText('x', qo, wo)).rejects.toThrow('x')
+
+ await expect(findByAltText('x', qo, wo)).rejects.toThrow('x')
+ await expect(findAllByAltText('x', qo, wo)).rejects.toThrow('x')
+
+ await expect(findByTitle('x', qo, wo)).rejects.toThrow('x')
+ await expect(findAllByTitle('x', qo, wo)).rejects.toThrow('x')
+
+ await expect(findByDisplayValue('x', qo, wo)).rejects.toThrow('x')
+ await expect(findAllByDisplayValue('x', qo, wo)).rejects.toThrow('x')
+
+ await expect(findByRole('x', qo, wo)).rejects.toThrow('x')
+ await expect(findAllByRole('x', qo, wo)).rejects.toThrow('x')
+
+ await expect(findByTestId('x', qo, wo)).rejects.toThrow('x')
+ await expect(findAllByTestId('x', qo, wo)).rejects.toThrow('x')
+})
+
+test('actually works with async code', async () => {
+ const {findByTestId, container, rerender} = render(``)
+ setTimeout(() => rerender(`correct dom
`), 20)
+ await expect(findByTestId('div', {}, {container})).resolves.toBeTruthy()
+})
diff --git a/src/__tests__/text-matchers.js b/src/__tests__/text-matchers.js
index 7cbd6924..fa0cd44d 100644
--- a/src/__tests__/text-matchers.js
+++ b/src/__tests__/text-matchers.js
@@ -1,4 +1,3 @@
-import 'jest-dom/extend-expect'
import cases from 'jest-in-case'
import {getDefaultNormalizer} from '../'
diff --git a/src/__tests__/wait-for-dom-change.js b/src/__tests__/wait-for-dom-change.js
index 0034f9bb..438a63ec 100644
--- a/src/__tests__/wait-for-dom-change.js
+++ b/src/__tests__/wait-for-dom-change.js
@@ -1,6 +1,4 @@
import {waitForDomChange} from '../'
-// adds special assertions like toBeTruthy
-import 'jest-dom/extend-expect'
import {render} from './helpers/test-utils'
const skipSomeTime = delayMs =>
diff --git a/src/__tests__/wait-for-element-to-be-removed.fake-timers.js b/src/__tests__/wait-for-element-to-be-removed.fake-timers.js
index a1d854cb..a6744d17 100644
--- a/src/__tests__/wait-for-element-to-be-removed.fake-timers.js
+++ b/src/__tests__/wait-for-element-to-be-removed.fake-timers.js
@@ -1,4 +1,3 @@
-import 'jest-dom/extend-expect'
import {waitForElementToBeRemoved} from '../'
import {render} from './helpers/test-utils'
diff --git a/src/__tests__/wait-for-element-to-be-removed.js b/src/__tests__/wait-for-element-to-be-removed.js
index f6425b41..3eeaff0a 100644
--- a/src/__tests__/wait-for-element-to-be-removed.js
+++ b/src/__tests__/wait-for-element-to-be-removed.js
@@ -1,4 +1,3 @@
-import 'jest-dom/extend-expect'
import {waitForElementToBeRemoved} from '../'
import {renderIntoDocument} from './helpers/test-utils'
diff --git a/src/__tests__/wait-for-element.js b/src/__tests__/wait-for-element.js
index 178142b8..106dc3a8 100644
--- a/src/__tests__/wait-for-element.js
+++ b/src/__tests__/wait-for-element.js
@@ -1,6 +1,4 @@
import {waitForElement, wait} from '../'
-// adds special assertions like toBeTruthy
-import 'jest-dom/extend-expect'
import {render} from './helpers/test-utils'
const skipSomeTime = delayMs =>
diff --git a/src/queries.js b/src/queries.js
index a406f8cd..5a7ceb71 100644
--- a/src/queries.js
+++ b/src/queries.js
@@ -6,6 +6,7 @@ import {
queryAllByAttribute,
queryByAttribute,
} from './query-helpers'
+import {waitForElement} from './wait-for-element'
import {getConfig} from './config'
// Here are the queries for the library.
@@ -375,6 +376,38 @@ function getByDisplayValue(...args) {
return firstResultOrNull(getAllByDisplayValue, ...args)
}
+function makeFinder(getter) {
+ return (container, text, options, waitForElementOptions) =>
+ waitForElement(
+ () => getter(container, text, options),
+ waitForElementOptions,
+ )
+}
+
+export const findByLabelText = makeFinder(getByLabelText)
+export const findAllByLabelText = makeFinder(getAllByLabelText)
+
+export const findByPlaceholderText = makeFinder(getByPlaceholderText)
+export const findAllByPlaceholderText = makeFinder(getAllByPlaceholderText)
+
+export const findByText = makeFinder(getByText)
+export const findAllByText = makeFinder(getAllByText)
+
+export const findByAltText = makeFinder(getByAltText)
+export const findAllByAltText = makeFinder(getAllByAltText)
+
+export const findByTitle = makeFinder(getByTitle)
+export const findAllByTitle = makeFinder(getAllByTitle)
+
+export const findByDisplayValue = makeFinder(getByDisplayValue)
+export const findAllByDisplayValue = makeFinder(getAllByDisplayValue)
+
+export const findByRole = makeFinder(getByRole)
+export const findAllByRole = makeFinder(getAllByRole)
+
+export const findByTestId = makeFinder(getByTestId)
+export const findAllByTestId = makeFinder(getAllByTestId)
+
export {
queryByPlaceholderText,
queryAllByPlaceholderText,
diff --git a/tests/setup-env.js b/tests/setup-env.js
new file mode 100644
index 00000000..4435317a
--- /dev/null
+++ b/tests/setup-env.js
@@ -0,0 +1 @@
+import 'jest-dom/extend-expect'