Skip to content

Commit

Permalink
Add jest extensions on main module (#175)
Browse files Browse the repository at this point in the history
BREAKING CHANGE
  • Loading branch information
gnapse authored Dec 18, 2019
1 parent 8e14dc1 commit 27c1056
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 52 deletions.
35 changes: 23 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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})
```
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/extend-expect.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import * as extensions from './index'
import * as extensions from './matchers'

expect.extend(extensions)
40 changes: 1 addition & 39 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -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'
39 changes: 39 additions & 0 deletions src/matchers.js
Original file line number Diff line number Diff line change
@@ -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,
}

0 comments on commit 27c1056

Please sign in to comment.