From 27c1056651c5c5bf66e2344fe0fc00950d18a605 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ernesto=20Garc=C3=ADa?= Date: Wed, 18 Dec 2019 09:28:25 -0500 Subject: [PATCH 1/3] Add jest extensions on main module (#175) BREAKING CHANGE --- README.md | 35 +++++++++++++++++++++++------------ src/extend-expect.js | 2 +- src/index.js | 40 +--------------------------------------- src/matchers.js | 39 +++++++++++++++++++++++++++++++++++++++ 4 files changed, 64 insertions(+), 52 deletions(-) create mode 100644 src/matchers.js diff --git a/README.md b/README.md index 0de0dc99..1fa48a7b 100644 --- a/README.md +++ b/README.md @@ -86,21 +86,22 @@ should be installed as one of your project's `devDependencies`: npm install --save-dev @testing-library/jest-dom ``` -> Note: We also recommend installing the jest-dom eslint plugin which provides auto-fixable lint rules -> that prevent false positive tests and improve test readability by ensuring you are using the right -> matchers in your tests. More details can be found at +> Note: We also recommend installing the jest-dom eslint plugin which provides +> auto-fixable lint rules that prevent false positive tests and improve test +> readability by ensuring you are using the right matchers in your tests. More +> details can be found at > [eslint-plugin-jest-dom](https://github.com/testing-library/eslint-plugin-jest-dom). ## Usage -Import `@testing-library/jest-dom/extend-expect` once (for instance in your -[tests setup file][]) and you're good to go: +Import `@testing-library/jest-dom` once (for instance in your [tests setup +file][]) and you're good to go: [tests setup file]: https://jestjs.io/docs/en/configuration.html#setupfilesafterenv-array ```javascript -import '@testing-library/jest-dom/extend-expect' +import '@testing-library/jest-dom' ``` > Note: If you're using TypeScript, make sure your setup file is a `.ts` and not @@ -110,7 +111,10 @@ Alternatively, you can selectively import only the matchers you intend to use, and extend jest's `expect` yourself: ```javascript -import {toBeInTheDocument, toHaveClass} from '@testing-library/jest-dom' +import { + toBeInTheDocument, + toHaveClass, +} from '@testing-library/jest-dom/matchers' expect.extend({toBeInTheDocument, toHaveClass}) ``` @@ -298,10 +302,16 @@ is `false`. ##### Using document.querySelector ```javascript -expect(document.querySelector('[data-testid="no-aria-invalid"]')).not.toBeInvalid() +expect( + document.querySelector('[data-testid="no-aria-invalid"]'), +).not.toBeInvalid() expect(document.querySelector('[data-testid="aria-invalid"]')).toBeInvalid() -expect(document.querySelector('[data-testid="aria-invalid-value"]')).toBeInvalid() -expect(document.querySelector('[data-testid="aria-invalid-false"]')).not.toBeInvalid() +expect( + document.querySelector('[data-testid="aria-invalid-value"]'), +).toBeInvalid() +expect( + document.querySelector('[data-testid="aria-invalid-false"]'), +).not.toBeInvalid() expect(document.querySelector('[data-testid="valid-form"]')).not.toBeInvalid() expect(document.querySelector('[data-testid="invalid-form"]')).toBeInvalid() @@ -427,7 +437,9 @@ must also be `true`. ```javascript expect(document.querySelector('[data-testid="no-aria-invalid"]')).toBeValid() expect(document.querySelector('[data-testid="aria-invalid"]')).not.toBeValid() -expect(document.querySelector('[data-testid="aria-invalid-value"]')).not.toBeValid() +expect( + document.querySelector('[data-testid="aria-invalid-value"]'), +).not.toBeValid() expect(document.querySelector('[data-testid="aria-invalid-false"]')).toBeValid() expect(document.querySelector('[data-testid="valid-form"]')).toBeValid() @@ -1103,7 +1115,6 @@ expect(document.querySelector('.cancel-button')).toBeTruthy() > replacing `toBeInTheDOM` to read through the documentation of the proposed > alternatives to see which use case works better for your needs. - ## Inspiration This whole library was extracted out of Kent C. Dodds' [DOM Testing diff --git a/src/extend-expect.js b/src/extend-expect.js index a0fc1d2c..3801a1d5 100644 --- a/src/extend-expect.js +++ b/src/extend-expect.js @@ -1,3 +1,3 @@ -import * as extensions from './index' +import * as extensions from './matchers' expect.extend(extensions) diff --git a/src/index.js b/src/index.js index 5e699d04..8cecbe35 100644 --- a/src/index.js +++ b/src/index.js @@ -1,39 +1 @@ -import {toBeInTheDOM} from './to-be-in-the-dom' -import {toBeInTheDocument} from './to-be-in-the-document' -import {toBeEmpty} from './to-be-empty' -import {toContainElement} from './to-contain-element' -import {toContainHTML} from './to-contain-html' -import {toHaveTextContent} from './to-have-text-content' -import {toHaveAttribute} from './to-have-attribute' -import {toHaveClass} from './to-have-class' -import {toHaveStyle} from './to-have-style' -import {toHaveFocus} from './to-have-focus' -import {toHaveFormValues} from './to-have-form-values' -import {toBeVisible} from './to-be-visible' -import {toBeDisabled, toBeEnabled} from './to-be-disabled' -import {toBeRequired} from './to-be-required' -import {toBeInvalid, toBeValid} from './to-be-invalid' -import {toHaveValue} from './to-have-value' -import {toBeChecked} from './to-be-checked' - -export { - toBeInTheDOM, - toBeInTheDocument, - toBeEmpty, - toContainElement, - toContainHTML, - toHaveTextContent, - toHaveAttribute, - toHaveClass, - toHaveStyle, - toHaveFocus, - toHaveFormValues, - toBeVisible, - toBeDisabled, - toBeEnabled, - toBeRequired, - toBeInvalid, - toBeValid, - toHaveValue, - toBeChecked, -} +import './extend-expect' diff --git a/src/matchers.js b/src/matchers.js new file mode 100644 index 00000000..5e699d04 --- /dev/null +++ b/src/matchers.js @@ -0,0 +1,39 @@ +import {toBeInTheDOM} from './to-be-in-the-dom' +import {toBeInTheDocument} from './to-be-in-the-document' +import {toBeEmpty} from './to-be-empty' +import {toContainElement} from './to-contain-element' +import {toContainHTML} from './to-contain-html' +import {toHaveTextContent} from './to-have-text-content' +import {toHaveAttribute} from './to-have-attribute' +import {toHaveClass} from './to-have-class' +import {toHaveStyle} from './to-have-style' +import {toHaveFocus} from './to-have-focus' +import {toHaveFormValues} from './to-have-form-values' +import {toBeVisible} from './to-be-visible' +import {toBeDisabled, toBeEnabled} from './to-be-disabled' +import {toBeRequired} from './to-be-required' +import {toBeInvalid, toBeValid} from './to-be-invalid' +import {toHaveValue} from './to-have-value' +import {toBeChecked} from './to-be-checked' + +export { + toBeInTheDOM, + toBeInTheDocument, + toBeEmpty, + toContainElement, + toContainHTML, + toHaveTextContent, + toHaveAttribute, + toHaveClass, + toHaveStyle, + toHaveFocus, + toHaveFormValues, + toBeVisible, + toBeDisabled, + toBeEnabled, + toBeRequired, + toBeInvalid, + toBeValid, + toHaveValue, + toBeChecked, +} From c76f8c548b3d99b8639aea05f76c111997c5bce5 Mon Sep 17 00:00:00 2001 From: John Gozde Date: Thu, 16 Jan 2020 09:14:58 -0700 Subject: [PATCH 2/3] Remove extend-expect typings (#182) BREAKING CHANGE: moving typings to @types/testing-library__jest-dom --- extend-expect.d.ts | 29 ----------------------------- 1 file changed, 29 deletions(-) delete mode 100644 extend-expect.d.ts diff --git a/extend-expect.d.ts b/extend-expect.d.ts deleted file mode 100644 index 98bbf5af..00000000 --- a/extend-expect.d.ts +++ /dev/null @@ -1,29 +0,0 @@ -declare namespace jest { - interface Matchers { - /** - * @deprecated - */ - toBeInTheDOM(container?: HTMLElement | SVGElement): R - toBeInTheDocument(): R - toBeVisible(): R - toBeEmpty(): R - toBeDisabled(): R - toBeEnabled(): R - toBeInvalid(): R - toBeRequired(): R - toBeValid(): R - toContainElement(element: HTMLElement | SVGElement | null): R - toContainHTML(htmlText: string): R - toHaveAttribute(attr: string, value?: any): R - toHaveClass(...classNames: string[]): R - toHaveFocus(): R - toHaveFormValues(expectedValues: {[name: string]: any}): R - toHaveStyle(css: string): R - toHaveTextContent( - text: string | RegExp, - options?: {normalizeWhitespace: boolean}, - ): R - toHaveValue(value?: string | string[] | number): R - toBeChecked(): R - } -} From d68ccd7d593f2316a4912dab1a0d7039990995be Mon Sep 17 00:00:00 2001 From: Ernesto Garcia Date: Thu, 16 Jan 2020 18:05:51 -0300 Subject: [PATCH 3/3] Add matchers module in the package root --- matchers.js | 1 + 1 file changed, 1 insertion(+) create mode 100644 matchers.js diff --git a/matchers.js b/matchers.js new file mode 100644 index 00000000..4f493911 --- /dev/null +++ b/matchers.js @@ -0,0 +1 @@ +export * from './src/matchers'