React-Style-Guide

A Reactjs coding style guide

This project is maintained by LinuxDevil

F.I.R.S.T. rules

Clean tests should follow the rules:

** Good

// add.ts

export const add = (a: number, b: number): number => {
  return a + b;
};

// add.test.ts

import { add } from './add';

describe('add function', () => {
  // Fast: This test is very quick to run.
  // Independent: This test does not depend on any other tests.
  // Repeatable: This test is repeatable, as it will always produce the same result given the same inputs.
  // Self-Validating: The test itself will report if it passes or fails.
  // Timely: The test is written before the actual function (in a TDD manner).

  it('correctly adds two numbers', () => {
    const result = add(1, 2);
    expect(result).toBe(3);
  });

  // We can also add more tests to cover more cases
  it('correctly adds two negative numbers', () => {
    const result = add(-1, -2);
    expect(result).toBe(-3);
  });

  it('correctly adds a positive and a negative number', () => {
    const result = add(-1, 2);
    expect(result).toBe(1);
  });
});

** Bad

// add.test.ts

import { add } from './add';

let previousResult = 0;

describe('add function', () => {
  it('correctly adds two numbers', () => {
    const result = add(1, 2);
    previousResult = result;
    expect(result).toBe(3);
  });

  it('correctly adds two other numbers', () => {
    const result = add(previousResult, 5);
    expect(result).toBe(8);
  });
});