Jest-dom-tables NPM

The problem

@testing-library/jest-dom is a fantastic library for giving richer matchers for html dom elements. However, testing html tables to ensure that data is being populated can lead to some gnarly code.

This solution

The jest-dom-tables library provides a custom jest matcher that you can use to test html tables. These will make your tests more declarative, clear to read and to maintain.

Installation
Usage
Custom matchers
- toHaveRowTextContent
LICENSE

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

npm install --save-dev jest-dom-tables

Usage

Import jest-dom-tables/extend-expect once (for instance in your tests setup file) and you're good to go:

import 'jest-dom-tables/extend-expect'

Custom matchers

`toHaveRowTextContent`

toHaveRowTextContent(text: string | RegExp)

This allows you to check whether the given talbe row element has a text content or not.

When a string argument is passed through, it will perform a partial case-sensitive match to the element content.

To perform a case-insensitive match, you can use a RegExp with the /i modifier.

Examples

<table>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

Using document.querySelector

const element = document.querySelectorAll('tr')[0]

expect(element).toHaveRowTextContent('| A | B | C |')
expect(element).not.toHaveRowTextContent('| Z | Y | X |')

Using DOM Testing Library

const element = getAllByRole('row')[0]

expect(element).toHaveRowTextContent('| A | B | C |')
expect(element).not.toHaveRowTextContent('| Z | Y | X |')