Front end testing

This pages describes the guidelines to follow when writing tests.

When to test?

Tests should be added for all new components and functions in tzcontrol.

What to test?


Functions should be tested using Jest unit tests.

Simple function with corresponding tests asserting on various input values.

export function isPalindrome(value: string): boolean {
    const reversed = value.split('').reverse().join('');
    return value === reversed;
import { isPalindrome } from '../isSpecial';

describe('isPalindrome', () => {
    describe('should return true if passed with', () => {
        it('ABBA', () => {
            const result = isPalindrome('ABBA');
        it('12321', () => {
            const result = isPalindrome('12321');
    describe('should return false if passed with', () => {
        it('John Doe', () => {
            const result = isPalindrome('John Doe');
        it('1337', () => {
            const result = isPalindrome('1337');

Dumb components

Dumb components are also called ‘presentational’ components because their only responsibility is to present something to the DOM. Once that is done, the component is done with it. No keeping tabs on it, no checking in once in a while to see how things are going. Nope. Put the info on the page and move on. – Jason Arnold

Tests for dumb components should include assertions for the different rendered states of the components. The tests are written using Jest and React Testing Library.

Consider the following example component, MyComponent, which switches state based on the boolean value.

import React, { ReactElement } from 'react';

export const MyComponent = (props: { active: boolean }): ReactElement => {
    return (
        <button type="button" disabled={!}>
            Click me!

For the component we add the following tests verifying the button’s label and disabled state.

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { MyComponent } from '../index.jsx';

describe('MyComponent', () => {
    it('Button text should be "Click me!"', () => {
        render(<MyComponent />);
        expect(screen.getByRole('button')).toHaveTextContent('Click me!');
    it('Button should be enabled if active is truthy', () => {
        render(<MyComponent active />);
    it('Button should be disabled if active is falsey', () => {
        render(<MyComponent />);


  • Tests should be defined/bundled closely to the source code of the component or function.
  • Tests should be added in the __tests__ directory, which should be adjacent to the component.
  • Tests for components should have the same name as the component e.g. MyComponent.test.jsx
├── index.jsx
├── utils/
│   ├── myFunction.js
│   └── __tests__/
│       └── myFunction.test.js
└── __tests__/
    └── MyComponent.test.jsx

More specific information about implementation details you could find in our related wiki article