dom-testing-library - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

extend-expect.js

 // eslint-disable-next-line
-require('./dist/extend-expect')
+require('jest-dom/extend-expect')

package.json

 {
   "name": "dom-testing-library",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Simple and complete DOM testing utilities that encourage good testing practices.",
@@ -37,3 +37,3 @@ "main": "dist/index.js",
   "dependencies": {
-    "jest-matcher-utils": "^22.4.3",
+    "jest-dom": "^1.0.0",
     "pretty-format": "^22.4.3",
@@ -40,0 +40,0 @@ "mutationobserver-shim": "^0.3.2",

README.md

@@ -19,3 +19,3 @@ <div align="center">
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-14-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-15-orange.svg?style=flat-square)](#contributors)
 [![PRs Welcome][prs-badge]][prs]
@@ -42,7 +42,7 @@ [![Code of Conduct][coc-badge]][coc]
 (whether simulated with [`JSDOM`](https://github.com/jsdom/jsdom) as provided by
-default with [jest](https://facebook.github.io/jest) or in the browser). The
-main utilities it provides involve querying the DOM for nodes in a way that's
-similar to how the user finds elements on the page. In this way, the library
-helps ensure your tests give you confidence in your UI code. The
-`dom-testing-library`'s primary guiding principle is:
+default with [jest][] or in the browser). The main utilities it provides involve
+querying the DOM for nodes in a way that's similar to how the user finds
+elements on the page. In this way, the library helps ensure your tests give you
+confidence in your UI code. The `dom-testing-library`'s primary guiding
+principle is:
 
@@ -85,7 +85,3 @@ > [The more your tests resemble the way your software is used, the more confidence they can give you.][guiding-principle]
 * [Custom Jest Matchers](#custom-jest-matchers)
-  * [`toBeInTheDOM`](#tobeinthedom)
-  * [`toHaveTextContent`](#tohavetextcontent)
-  * [`toHaveAttribute`](#tohaveattribute)
-  * [`toHaveClass`](#tohaveclass)
-  * [Custom Jest Matchers - Typescript](#custom-jest-matchers---typescript)
+  * [Using other assertion libraries](#using-other-assertion-libraries)
 * [`TextMatch`](#textmatch)
@@ -383,3 +379,3 @@ * [`query` APIs](#query-apis)
 fireEvent(
-  getElementByText('Submit'),
+  getByText(container, 'Submit'),
   new MouseEvent('click', {
@@ -407,18 +403,14 @@ bubbles: true,
 
-There are two simple API which extend the `expect` API of jest for making assertions easier.
+When using [jest][], we recommend that you import a set of custom matchers that
+make it easier to check several aspects of the state of a DOM element. These are
+provided by [jest-dom](https://github.com/gnapse/jest-dom), but are also
+included for convenience to be imported from this library directly:
 
-### `toBeInTheDOM`
-
-This allows you to assert whether an element present in the DOM or not.
-
 ```javascript
-// add the custom expect matchers
 import 'dom-testing-library/extend-expect'
 
+// <span data-testid="greetings">Hello World</span>
+expect(queryByText(container, 'greetings')).toBeInTheDOM()
+expect(queryByText(container, 'greetings')).not.toHaveTextContent('Bye bye')
 // ...
-// <span data-testid="count-value">2</span>
-expect(queryByTestId(container, 'count-value')).toBeInTheDOM()
-expect(queryByTestId(container, 'count-value1')).not.toBeInTheDOM()
-// ...
-```
 
@@ -428,83 +420,18 @@ > Note: when using `toBeInTheDOM`, make sure you use a query function
 > Otherwise the `get*` function could throw an error before your assertion.
-
-### `toHaveTextContent`
-
-This API allows you to check whether the given element has a text content or not.
-
-```javascript
-// add the custom expect matchers
-import 'dom-testing-library/extend-expect'
-
-// ...
-// <span data-testid="count-value">2</span>
-expect(getByTestId(container, 'count-value')).toHaveTextContent('2')
-expect(getByTestId(container, 'count-value')).not.toHaveTextContent('21')
-// ...
 ```
 
-### `toHaveAttribute`
+Check out [jest-dom's documentation](https://github.com/gnapse/jest-dom#readme)
+for a full list of available matchers.
 
-This allows you to check wether the given element has an attribute or not. You
-can also optionally check that the attribute has a specific expected value.
+### Using other assertion libraries
 
-```javascript
-// add the custom expect matchers
-import 'dom-testing-library/extend-expect'
+If you're not using jest, you may be able to find a similar set of custom
+assertions for your library of choice. Here's a list of alternatives to jest-dom
+for other popular assertion libraries:
 
-// ...
-// <button data-testid="ok-button" type="submit" disabled>
-//   OK
-// </button>
-expect(getByTestId(container, 'ok-button')).toHaveAttribute('disabled')
-expect(getByTestId(container, 'ok-button')).toHaveAttribute('type', 'submit')
-expect(getByTestId(container, 'ok-button')).not.toHaveAttribute(
-  'type',
-  'button',
-)
-// ...
-```
+* [chai-dom](https://github.com/nathanboktae/chai-dom)
 
-### `toHaveClass`
+If you're aware of some other alternatives, please [make a pull request][prs]
+and add it here!
 
-This allows you to check wether the given element has certain classes within its
-`class` attribute.
-
-```javascript
-// add the custom expect matchers
-import 'dom-testing-library/extend-expect'
-
-// ...
-// <button data-testid="delete-button" class="btn extra btn-danger">
-//   Delete item
-// </button>
-expect(getByTestId(container, 'delete-button')).toHaveClass('extra')
-expect(getByTestId(container, 'delete-button')).toHaveClass('btn-danger btn')
-expect(getByTestId(container, 'delete-button')).not.toHaveClass('btn-link')
-// ...
-```
-
-### Custom Jest Matchers - Typescript
-
-When you use custom Jest Matchers with Typescript, you will need to extend the
-type signature of `jest.Matchers<void>`, then cast the result of `expect`
-accordingly. Here's a handy usage example:
-
-```typescript
-import {getByTestId} from 'dom-testing-library'
-// this adds custom expect matchers
-import 'dom-testing-library/extend-expect'
-interface ExtendedMatchers extends jest.Matchers<void> {
-  toHaveTextContent: (htmlElement: string) => object
-  toBeInTheDOM: () => void
-}
-test('renders the tooltip as expected', async () => {
-  // however you render it:
-  // render(`<div><span data-testid="greeting">hello world</span></div>`)
-  ;(expect(
-    container,
-    getByTestId('greeting'),
-  ) as ExtendedMatchers).toHaveTextContent('hello world')
-})
-```
-
 ## `TextMatch`
@@ -738,2 +665,3 @@
 | [<img src="https://avatars1.githubusercontent.com/u/1241511?s=460&v=4" width="100px;"/><br /><sub><b>Anto Aravinth</b></sub>](https://github.com/antoaravinth)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=antoaravinth "Code") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=antoaravinth "Tests") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=antoaravinth "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/3462296?v=4" width="100px;"/><br /><sub><b>Jonah Moses</b></sub>](https://github.com/JonahMoses)<br />[📖](https://github.com/kentcdodds/dom-testing-library/commits?author=JonahMoses "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/4002543?v=4" width="100px;"/><br /><sub><b>Łukasz Gandecki</b></sub>](http://team.thebrain.pro)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=lgandecki "Code") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=lgandecki "Tests") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=lgandecki "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/498274?v=4" width="100px;"/><br /><sub><b>Ivan Babak</b></sub>](https://sompylasar.github.io)<br />[🐛](https://github.com/kentcdodds/dom-testing-library/issues?q=author%3Asompylasar "Bug reports") [🤔](#ideas-sompylasar "Ideas, Planning, & Feedback") [💻](https://github.com/kentcdodds/dom-testing-library/commits?author=sompylasar "Code") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=sompylasar "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/4439618?v=4" width="100px;"/><br /><sub><b>Jesse Day</b></sub>](https://github.com/jday3)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=jday3 "Code") | [<img src="https://avatars0.githubusercontent.com/u/15199?v=4" width="100px;"/><br /><sub><b>Ernesto García</b></sub>](http://gnapse.github.io)<br />[💬](#question-gnapse "Answering Questions") [💻](https://github.com/kentcdodds/dom-testing-library/commits?author=gnapse "Code") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=gnapse "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/2747424?v=4" width="100px;"/><br /><sub><b>Josef Maxx Blake</b></sub>](http://jomaxx.com)<br />[💻](https://github.com/kentcdodds/dom-testing-library/commits?author=jomaxx "Code") [📖](https://github.com/kentcdodds/dom-testing-library/commits?author=jomaxx "Documentation") [⚠️](https://github.com/kentcdodds/dom-testing-library/commits?author=jomaxx "Tests") |
+| [<img src="https://avatars3.githubusercontent.com/u/725236?v=4" width="100px;"/><br /><sub><b>Alex Cook</b></sub>](https://github.com/alecook)<br />[📖](https://github.com/kentcdodds/dom-testing-library/commits?author=alecook "Documentation") [💡](#example-alecook "Examples") |
 
@@ -777,1 +705,2 @@ <!-- ALL-CONTRIBUTORS-LIST:END -->
 [data-testid-blog-post]: https://blog.kentcdodds.com/making-your-ui-tests-resilient-to-change-d37a6ee37269
+[jest]: https://facebook.github.io/jest

No alert changes

Worsened metrics

Total package byte prevSize

57093

decreased by-10.2%

Number of package files

11

decreased by-15.38%

Lines of code

640

decreased by-14.32%

Number of lines in readme file

699

decreased by-9.22%

Dependency changes

• + Addedjest-dom@^1.0.0

• + Addedatob@2.1.2(transitive)

• + Addedcss@2.2.4(transitive)

• + Addeddecode-uri-component@0.2.2(transitive)

• + Addeddiff@3.5.0(transitive)

• + Addedindent-string@3.2.0(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedjest-diff@22.4.3(transitive)

• + Addedjest-dom@1.12.1(transitive)

• + Addedpretty-format@23.6.0(transitive)

• + Addedredent@2.0.0(transitive)

• + Addedresolve-url@0.2.1(transitive)

• + Addedsource-map@0.6.1(transitive)

• + Addedsource-map-resolve@0.5.3(transitive)

• + Addedsource-map-url@0.4.1(transitive)

• + Addedstrip-indent@2.0.0(transitive)

• + Addedurix@0.1.0(transitive)

• - Removedjest-matcher-utils@^22.4.3