EcoSystem and Plugins

bs-jest-dom

The bs-jest-dom is again a companion library for the bs-react-testing-library that is used to provide custom DOM element matchers for Jest in BuckleScript and ReasonML. We can install the bs-jest-dom library using the following command.

npm install --save-dev bs-jest-dom

You can also try this code with Online Javascript Compiler

Run Code

We further need to add the following code in the dependencies.

{
  "bs-dev-dependencies": ["bs-jest-dom"]
}

You can also try this code with Online Javascript Compiler

Run Code

The below example demonstrates the usage of bs-jest-dom,

/* test_bsjest.re */
open Jest;
open JestDom;
open ReactTestingLibrary;

module Heading = {
  let component = ReasonReact.statelessComponent("Heading");


  let make = (~text, _children) => {
    ...component,
    render: _self =>
      <h1> {ReasonReact.string(text)} </h1>,
  };
};

test("render using text", () =>
  <Heading text="Some random text" />
  |> render
  |> getByText(~matcher=`Str("Some random text"))
  |> expect
  |> toBeInTheDocument
);

You can also try this code with Online Javascript Compiler

Run Code

jest-native

The jest-native library is used to provide custom element matchers for the React Native Testing Library. The jest-native library can be imported using the following code.

npm install --save-dev @testing-library/jest-native

You can also try this code with Online Javascript Compiler

Run Code

The following code demonstrates the working of the jest-native library.

const {queryByTestId} = render(
  <View>
    <View testID="nonEmp">
      <Text testID="emp" />
    </View>
    <Text testID="vis">Example</Text>
  </View>,
)
expect(queryByTestId('nonEmp')).not.toBeEmpty()

You can also try this code with Online Javascript Compiler

Run Code

react-select-event

The react-select-event library provides the developer with helper methods to interact with the react-select elements. We can fetch the react-select-event library using the following code.

npm install --save-dev react-select-event

You can also try this code with Online Javascript Compiler

Run Code

Let us look at an example of the react-select-event library.

import React from 'react'
import Select from 'react-select'
import {render} from '@testing-library/react'
import selectEvent from 'react-select-event'
const {getByTestId, getByLabelText} = render(
  <form data-testid="form-main">
    <label htmlFor="language">Language</label>
    <Select options={OPTIONS} name="language" inputId="language" isMulti />
  </form>,
)
expect(getByTestId('form-main')).toHaveFormValues({language: ''}) // empty select

// select two values...
await selectEvent.select(getByLabelText('Language'), ['Java', 'Python'])
expect(getByTestId('form-main')).toHaveFormValues({language: ['java', 'python']})


// ...and add a third one
await selectEvent.select(getByLabelText('Language'), 'C')
expect(getByTestId('form-main')).toHaveFormValues({
  language: ['java', 'python', 'c'],
})

You can also try this code with Online Javascript Compiler

Run Code

eslint-plugin

eslint-plugin-testing-library

The eslint-plugin-testing-library assists the user in following the best practices for writing tests and also anticipates the most likely errors while writing the tests. It is present in the Testing Library.

The eslint plugin further includes the following features,

• The plugin includes configurations for the recommended rules
• It includes some rules that can be auto fixed
• There are multiple rules for Linting Testing Library specific code
• There are shareable configurations for specific rules by frameworks like Angular, React, Vue.

eslint-plugin-jest-dom

The eslint-plugin-testing-library assists the user in following the best practices for writing tests and also anticipates the most likely errors while writing the tests. It is present in the Jest DOM Library.

• The plugin includes configurations for the recommended rules
• It includes some rules that can be auto fixed
• There are multiple rules for Linting Jest DOM specific code

riot-testing-library

The riot-testing-library is used to add APIs to work with Riot.js components. It is built on top of the DOM Testing Library. We can install the riot-testing-library using the following code.

npm install --save-dev riot-testing-library

You can also try this code with Online Javascript Compiler

Run Code

Let us look at an example of riot-testing-library.

import render, {fireEvent} from 'riot-testing-library'
import TestTag from './test.tag'

test('show count text  when rendered', () => {
  const {queryByTestId} = render(TestTag, {count: 10})
  expect(queryByTestId('countText').textContent).toBe('10')
})

test('add count when click add button text', () => {
  const {queryByTestId} = render(TestTag, {count: 1})
  expect(queryByTestId('countText').textContent).toBe('1')
  fireEvent.click(queryByTestId('btn'))
  expect(queryByTestId('countText').textContent).toBe('2')
})

You can also try this code with Online Javascript Compiler

Run Code

jasmine-dom

The jasmine-dom is a companion library that is used to provide custom DOM element matchers for Jasmine. We can install the jasmine-dom library using the following code.

npm install --save-dev @testing-library/jasmine-dom

You can also try this code with Online Javascript Compiler

Run Code

We can look at the following example to understand the working of jasmine-dom library.

<span data-testid="nonEmp"><span data-testid="emp"></span></span>
<div data-testid="vis">Example</div>


expect(screen.queryByTestId('nonEmp')).not.toBeEmptyDOMElement()
expect(screen.getByText('Example')).toBeVisible()

You can also try this code with Online Javascript Compiler

Run Code

query-extension

The query-extension library is used to mix a higher-level API into the standard testing-library core queries. It is an experimental companion library for the React Testing Library. We can install the query-extension library using the following code.

npm install --save-dev query-extensions 

You can also try this code with Online Javascript Compiler

Run Code

rtl-simple-queries

The rtl-simple-queries library is used to provide an alternate query API. We can install it using the following npm command.

npm install --save-dev rtl-simple-queries

You can also try this code with Online Javascript Compiler

Run Code

The following code snippet explains the working of rtl-simple-queries,

import {screen} from 'rtl-simple-queries'

screen.fetchByText(/text/)
screen.fetchByText(/text/, {allowMultiple: false})
screen.fetchByText(/text/, {allowEmpty: true, allowMultiple: false})

// async
await screen.fetchByTextAsync(/text/, {allowMultiple: true})

You can also try this code with Online Javascript Compiler

Run Code

testing-library-selector

The testing-library-selector is used to provide reusable selectors for the Testing Library. It is generally written in TypeScript. We can install it using the following npm command.

npm install --save-dev testing-library-selector 

Let us look at an example of the testing-library-selector library.

import {byLabelText, byRole, byTestId} from './selector'

const ui = {
  container: byTestId('container'),
  submitButton: byRole('button', {name: 'Enter'}),
  usernameInput: byLabelText('Name:'),
  passwordInput: byLabelText<HTMLInputElement>('Pass:'),
}

it('test example', async () => {
  await ui.submitButton.find()
  expect(ui.submitButton.query()).not.toBeInDocument()
  expect(ui.submitButton.get()).toBeInDocument()
  const containers = ui.container.getAll()
  expect(containers).toHaveLength(3)
  const username = ui.usernameInput.get(containers[0])
})

You can also try this code with Online Javascript Compiler

Run Code

FAQs

1. What is Dynamic Testing?
   A Dynamic Test is one of the most commonly used tests, and it is generated at the run time. We use the TestFactory method to generate Dynamic Tests in JUnit5. TestFactory method is a non-static and non-private method.
2. What are testing libraries?
   The testing library is a collection of packages that helps the developer to test the UI components in a user-centric way.
3. What is DOM?
   DOM stands for Document Object Model. It is a cross-platform and language-independent interface for treating an XML or HTML document.
4. What is Jest?
   Jest is a framework in JavaScript that is used for the testing purposes of large web applications. It is maintained by Facebook. Since Jest doesn’t require a lot of configuration, it is an excellent option to be used as a testing framework among new developers.
5. What is the disadvantage of using Jest?
   Although Jest is a compelling library, it is comparatively prolonged compared to other testing libraries.

Key Takeaways

This Blog covered all the necessary points about the EcoSystems and Plugins in the Jest Testing Library. We further discussed the implementation of these EcoSystems and Plugins. If you are Preparing for interview and don't know where to start, we have got you covered, check out our expert curated courses on our website, You can also check out Coding Ninjas Studio to practice frequently asked interview problems. We hope that this blog has helped you enhance your knowledge regarding Jest and if you would like to learn more, check out our articles. Do upvote our blog to help other ninjas grow. Happy Coding!”