Forem: Vijay Thirugnanam

Try chatblogr.com

Vijay Thirugnanam — Sat, 24 Jan 2026 02:37:40 +0000

I'm testing some ideas on my site — https://chatblogr.com. I welcome your feedback.

Introduction to React testing library

Vijay Thirugnanam — Wed, 11 Aug 2021 15:59:13 +0000

React testing library has replaced Enzyme as the new standard for testing React components. It renders components to the virtual DOM, queries for an element in the DOM and then makes assertions on that element.

import { render, screen } from '@testing-library/react';
import App from './App';

test('A very basic test', () => {
  render(<App />);
  const textElement = screen.getByText(/hello world/i);
  expect(textElement).toBeInTheDocument();
});

I really like the way we structure tests with React testing library. Render the component, get some element, assert on the element. Very intuitive.

Whenever we test behaviour like button clicks, we make sure of the user-event library.

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import App from './App';

test('Button click', () => {
  render(<App />);
  const buttonElement = screen.getByRole('button', { name: /click me/i });
  userEvent.click(buttonElement);
  const textElement = screen.getByText(/some text/i);
  expect(textElement).toBeInTheDocument();
});

In the above test, we click a button and hopefully some new text appears in the screen.

I wrote an elaborate article covering more scenarios. Love to hear your feedback on it.

React component to measure code coverage of QA

Vijay Thirugnanam — Sun, 13 Jan 2019 03:52:05 +0000

To measure code coverage, first instrument the build using babel-plugin-istanbul.

Then in your React application, add React components from npm package to display code coverage results.

npm install istanbul-coverage-display

Add the summary component in all pages. It gets added at fixed position in the bottom left corner of the screen.

import { CoverageSummary } from 'istanbul-coverage-display'

Optionally, Add the detail component in a specific route in the application, say /coverage.

import { CoverageDetail } from 'istanbul-coverage-display'

By providing the onNavigate prop in CoverageSummary, we can navigate to the route having the CoverageDetail component.

<CoverageSummary onNavigate={navigateToDetail} />

For more information, why we need this for QA testing, check out my blog.

There is also a demo for this component.