-
-
,
- )
- expect(getByLabelText('1st').id).toBe('first-id')
- expect(getByLabelText('2nd').id).toBe('second-id')
- expect(getByLabelText('3rd').id).toBe('third-id')
-})
-
-test('get can get form controls by placeholder', () => {
- const {getByPlaceholderText} = render(
- ,
- )
- expect(getByPlaceholderText('username').id).toBe('username-id')
-})
-
-test('label with no form control', () => {
- const {getByLabelText, queryByLabelText} = render()
- expect(queryByLabelText('alone')).toBeNull()
- expect(() => getByLabelText('alone')).toThrowErrorMatchingSnapshot()
-})
-
-test('totally empty label', () => {
- const {getByLabelText, queryByLabelText} = render()
- expect(queryByLabelText('')).toBeNull()
- expect(() => getByLabelText('')).toThrowErrorMatchingSnapshot()
-})
-
-test('getByLabelText with aria-label', () => {
- // not recommended normally, but supported for completeness
- const {queryByLabelText} = render()
- expect(queryByLabelText('bat')).toBeInTheDOM()
-})
-
-test('get element by its alt text', () => {
- const {getByAltText} = render(
-
-
-
-
-
-
-
-
-
-
- 
-
,
- )
- expect(getByAltText(/fin.*nem.*poster$/i).src).toBe('/finding-nemo.png')
-})
-
-test('using jest helpers to assert element states', () => {
- const {queryByTestId} = render(2)
-
- // other ways to assert your test cases, but you don't need all of them.
- expect(queryByTestId('count-value')).toBeInTheDOM()
- expect(queryByTestId('count-value1')).not.toBeInTheDOM()
- expect(queryByTestId('count-value')).toHaveTextContent('2')
- expect(queryByTestId('count-value')).not.toHaveTextContent('21')
- expect(() =>
- expect(queryByTestId('count-value2')).toHaveTextContent('2'),
- ).toThrowError()
-
- // negative test cases wrapped in throwError assertions for coverage.
- expect(() =>
- expect(queryByTestId('count-value')).not.toBeInTheDOM(),
- ).toThrowError()
- expect(() =>
- expect(queryByTestId('count-value1')).toBeInTheDOM(),
- ).toThrowError()
- expect(() =>
- expect(queryByTestId('count-value')).toHaveTextContent('3'),
- ).toThrowError()
- expect(() =>
- expect(queryByTestId('count-value')).not.toHaveTextContent('2'),
- ).toThrowError()
-})
-
-test('using jest helpers to check element attributes', () => {
- const {queryByTestId} = render(
- ,
- )
-
- expect(queryByTestId('ok-button')).toHaveAttribute('disabled')
- expect(queryByTestId('ok-button')).toHaveAttribute('type')
- expect(queryByTestId('ok-button')).not.toHaveAttribute('class')
- expect(queryByTestId('ok-button')).toHaveAttribute('type', 'submit')
- expect(queryByTestId('ok-button')).not.toHaveAttribute('type', 'button')
-
- expect(() =>
- expect(queryByTestId('ok-button')).not.toHaveAttribute('disabled'),
- ).toThrowError()
- expect(() =>
- expect(queryByTestId('ok-button')).not.toHaveAttribute('type'),
- ).toThrowError()
- expect(() =>
- expect(queryByTestId('ok-button')).toHaveAttribute('class'),
- ).toThrowError()
- expect(() =>
- expect(queryByTestId('ok-button')).not.toHaveAttribute('type', 'submit'),
- ).toThrowError()
- expect(() =>
- expect(queryByTestId('ok-button')).toHaveAttribute('type', 'button'),
- ).toThrowError()
-})
-
-/* eslint jsx-a11y/label-has-for:0 */
diff --git a/src/__tests__/text-matchers.js b/src/__tests__/text-matchers.js
deleted file mode 100644
index c932572a..00000000
--- a/src/__tests__/text-matchers.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-import cases from 'jest-in-case'
-import {render} from '../'
-
-cases(
- 'text matchers',
- opts => {
- const {getByText} = render(
-
- About
- ,
- )
- expect(getByText(opts.textMatch).id).toBe('anchor')
- },
- [
- {name: 'string match', textMatch: 'About'},
- {name: 'case insensitive', textMatch: 'about'},
- {name: 'regex', textMatch: /^about$/i},
- {
- name: 'function',
- textMatch: (text, element) =>
- element.tagName === 'A' && text.includes('out'),
- },
- ],
-)
diff --git a/src/extend-expect.js b/src/extend-expect.js
deleted file mode 100644
index a2ddc2b4..00000000
--- a/src/extend-expect.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import extensions from './jest-extensions'
-
-const {toBeInTheDOM, toHaveTextContent, toHaveAttribute} = extensions
-expect.extend({toBeInTheDOM, toHaveTextContent, toHaveAttribute})
diff --git a/src/index.js b/src/index.js
index d6c27ce2..9906d080 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,6 @@
import ReactDOM from 'react-dom'
import {Simulate} from 'react-dom/test-utils'
-import waitForExpect from 'wait-for-expect'
-import * as queries from './queries'
+import {queries, wait} from 'dom-testing-library'
function render(ui, {container = document.createElement('div')} = {}) {
ReactDOM.render(ui, container)
@@ -19,14 +18,4 @@ function render(ui, {container = document.createElement('div')} = {}) {
}
}
-// this returns a new promise and is just a simple way to
-// wait until the next tick so resolved promises chains will continue
-function flushPromises() {
- return new Promise(resolve => setImmediate(resolve))
-}
-
-function wait(callback = () => {}, {timeout = 4500, interval = 50} = {}) {
- return waitForExpect(callback, timeout, interval)
-}
-
-export {render, flushPromises, Simulate, wait, waitForExpect}
+export {render, Simulate, wait}
diff --git a/src/jest-extensions.js b/src/jest-extensions.js
deleted file mode 100644
index d0b74b8f..00000000
--- a/src/jest-extensions.js
+++ /dev/null
@@ -1,137 +0,0 @@
-//eslint-disable-next-line import/no-extraneous-dependencies
-import {
- matcherHint,
- printReceived,
- printExpected,
- stringify,
- RECEIVED_COLOR as receivedColor,
- EXPECTED_COLOR as expectedColor,
-} from 'jest-matcher-utils'
-import {matches} from './utils'
-
-function getDisplayName(subject) {
- if (subject && subject.constructor) {
- return subject.constructor.name
- } else {
- return typeof subject
- }
-}
-
-function checkHtmlElement(htmlElement) {
- if (!(htmlElement instanceof HTMLElement)) {
- throw new Error(
- `The given subject is a ${getDisplayName(
- htmlElement,
- )}, not an HTMLElement`,
- )
- }
-}
-
-const assertMessage = (assertionName, message, received, expected) =>
- `${matcherHint(`${assertionName}`, 'received', '')} \n${message}: ` +
- `${printExpected(expected)} \nReceived: ${printReceived(received)}`
-
-function printAttribute(name, value) {
- return value === undefined ? name : `${name}=${stringify(value)}`
-}
-
-function getAttributeComment(name, value) {
- return value === undefined
- ? `element.hasAttribute(${stringify(name)})`
- : `element.getAttribute(${stringify(name)}) === ${stringify(value)}`
-}
-
-const extensions = {
- toBeInTheDOM(received) {
- getDisplayName(received)
- if (received) {
- return {
- message: () =>
- `${matcherHint(
- '.not.toBeInTheDOM',
- 'received',
- '',
- )} Expected the element not to be present` +
- `\nReceived : ${printReceived(received)}`,
- pass: true,
- }
- } else {
- return {
- message: () =>
- `${matcherHint(
- '.toBeInTheDOM',
- 'received',
- '',
- )} Expected the element to be present` +
- `\nReceived : ${printReceived(received)}`,
- pass: false,
- }
- }
- },
-
- toHaveTextContent(htmlElement, checkWith) {
- checkHtmlElement(htmlElement)
- const textContent = htmlElement.textContent
- const pass = matches(textContent, htmlElement, checkWith)
- if (pass) {
- return {
- message: () =>
- assertMessage(
- '.not.toHaveTextContent',
- 'Expected value not equals to',
- htmlElement,
- checkWith,
- ),
- pass: true,
- }
- } else {
- return {
- message: () =>
- assertMessage(
- '.toHaveTextContent',
- 'Expected value equals to',
- htmlElement,
- checkWith,
- ),
- pass: false,
- }
- }
- },
-
- toHaveAttribute(htmlElement, name, expectedValue) {
- checkHtmlElement(htmlElement)
- const isExpectedValuePresent = expectedValue !== undefined
- const hasAttribute = htmlElement.hasAttribute(name)
- const receivedValue = htmlElement.getAttribute(name)
- return {
- pass: isExpectedValuePresent
- ? hasAttribute && receivedValue === expectedValue
- : hasAttribute,
- message: () => {
- const to = this.isNot ? 'not to' : 'to'
- const receivedAttribute = receivedColor(
- hasAttribute
- ? printAttribute(name, receivedValue)
- : 'attribute was not found',
- )
- const expectedMsg = `Expected the element ${to} have attribute:\n ${expectedColor(
- printAttribute(name, expectedValue),
- )}`
- const matcher = matcherHint(
- `${this.isNot ? '.not' : ''}.toHaveAttribute`,
- 'element',
- printExpected(name),
- {
- secondArgument: isExpectedValuePresent
- ? printExpected(expectedValue)
- : undefined,
- comment: getAttributeComment(name, expectedValue),
- },
- )
- return `${matcher}\n\n${expectedMsg}\nReceived:\n ${receivedAttribute}`
- },
- }
- },
-}
-
-export default extensions
diff --git a/src/queries.js b/src/queries.js
deleted file mode 100644
index 237f39e9..00000000
--- a/src/queries.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import {matches} from './utils'
-
-// Here are the queries for the library.
-// The queries here should only be things that are accessible to both users who are using a screen reader
-// and those who are not using a screen reader (with the exception of the data-testid attribute query).
-
-function queryLabelByText(container, text) {
- return (
- Array.from(container.querySelectorAll('label')).find(label =>
- matches(label.textContent, label, text),
- ) || null
- )
-}
-
-function queryByLabelText(container, text, {selector = '*'} = {}) {
- const label = queryLabelByText(container, text)
- if (!label) {
- return queryByAttribute('aria-label', container, text)
- }
- /* istanbul ignore if */
- if (label.control) {
- // appears to be unsupported in jsdom: https://github.com/jsdom/jsdom/issues/2175
- // but this would be the proper way to do things
- return label.control
- } else if (label.getAttribute('for')) {
- //
- return container.querySelector(`#${label.getAttribute('for')}`)
- } else if (label.getAttribute('id')) {
- //
- return container.querySelector(
- `[aria-labelledby="${label.getAttribute('id')}"]`,
- )
- } else if (label.childNodes.length) {
- //
- return label.querySelector(selector)
- } else {
- return null
- }
-}
-
-function queryByText(container, text, {selector = '*'} = {}) {
- return (
- Array.from(container.querySelectorAll(selector)).find(node =>
- matches(getText(node), node, text),
- ) || null
- )
-}
-
-// this is just a utility and not an exposed query.
-// There are no plans to expose this.
-function queryByAttribute(attribute, container, text) {
- return (
- Array.from(container.querySelectorAll(`[${attribute}]`)).find(node =>
- matches(node.getAttribute(attribute), node, text),
- ) || null
- )
-}
-
-const queryByPlaceholderText = queryByAttribute.bind(null, 'placeholder')
-const queryByTestId = queryByAttribute.bind(null, 'data-testid')
-
-// this is just a utility and not an exposed query.
-// There are no plans to expose this.
-function getText(node) {
- return Array.from(node.childNodes)
- .filter(
- child => child.nodeType === Node.TEXT_NODE && Boolean(child.textContent),
- )
- .map(c => c.textContent)
- .join(' ')
-}
-
-// getters
-// the reason we're not dynamically generating these functions that look so similar:
-// 1. The error messages are specific to each one and depend on arguments
-// 2. The stack trace will look better because it'll have a helpful method name.
-
-function getByTestId(container, id, ...rest) {
- const el = queryByTestId(container, id, ...rest)
- if (!el) {
- throw new Error(`Unable to find an element by: [data-testid="${id}"]`)
- }
- return el
-}
-
-function getByPlaceholderText(container, text, ...rest) {
- const el = queryByPlaceholderText(container, text, ...rest)
- if (!el) {
- throw new Error(
- `Unable to find an element with the placeholder text of: ${text}`,
- )
- }
- return el
-}
-
-function getByLabelText(container, text, ...rest) {
- const el = queryByLabelText(container, text, ...rest)
- if (!el) {
- const label = queryLabelByText(container, text)
- if (label) {
- throw new Error(
- `Found a label with the text of: ${text}, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.`,
- )
- } else {
- throw new Error(`Unable to find a label with the text of: ${text}`)
- }
- }
- return el
-}
-
-function getByText(container, text, ...rest) {
- const el = queryByText(container, text, ...rest)
- if (!el) {
- throw new Error(
- `Unable to find an element with the text: ${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.`,
- )
- }
- return el
-}
-
-function queryByAltText(container, alt) {
- return (
- Array.from(container.querySelectorAll('img,input,area')).find(node =>
- matches(node.getAttribute('alt'), node, alt),
- ) || null
- )
-}
-
-function getByAltText(container, alt) {
- const el = queryByAltText(container, alt)
- if (!el) {
- throw new Error(`Unable to find an element with the alt text: ${alt}`)
- }
- return el
-}
-
-export {
- queryByPlaceholderText,
- getByPlaceholderText,
- queryByText,
- getByText,
- queryByLabelText,
- getByLabelText,
- queryByAltText,
- getByAltText,
- queryByTestId,
- getByTestId,
-}
-
-/* eslint complexity:["error", 14] */
diff --git a/src/utils.js b/src/utils.js
deleted file mode 100644
index b37542f1..00000000
--- a/src/utils.js
+++ /dev/null
@@ -1,13 +0,0 @@
-//eslint-disable-next-line import/prefer-default-export
-export function matches(textToMatch, node, matcher) {
- if (typeof textToMatch !== 'string') {
- return false
- }
- if (typeof matcher === 'string') {
- return textToMatch.toLowerCase().includes(matcher.toLowerCase())
- } else if (typeof matcher === 'function') {
- return matcher(textToMatch, node)
- } else {
- return matcher.test(textToMatch)
- }
-}
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 07c15511..d1fbf826 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -1,5 +1,4 @@
import {Simulate as ReactSimulate} from 'react-dom/test-utils'
-export {default as waitForExpect} from 'wait-for-expect'
interface RenderResult {
container: HTMLDivElement
@@ -21,8 +20,6 @@ export function render(
options?: {container: HTMLElement},
): RenderResult
-export function flushPromises(): Promise
-