Testing Documentation Frontend

[archit7448]

Testing Documentation

Prerequites :

---

1. React
2. Jest

---

Tools :

1. Jest
2. React testing library
3. msw(Mock Service Worker)

Why do we need tests ?

1. To save time and manual labour.
2. It ensures we cover erverything in test.
3. If test runs on local, no bad build can be merge.
4. You will end up writing better test code .
5. RDS TDD
6. TDD practice RDS

Folder Structure

Testing Guidelines

1. Import order and comments

/** Third Party Dependencies */
import { AxiosError } from "axios";
import { rest } from "msw";
import { renderHook, waitFor } from "@testing-library/react";

/** Component Dependecies */

import { useAxios } from "../useAxios";

/** Utilities */
import { server } from "../../mocks/server";

/** Constants */

import {
  MOCK_DATA,
  MOCK_GET_URL,
  MOCK_PATCH_DATA,
  MOCK_PATCH_URL,
  MOCK_REJECT_URL,
} from "../../constants/mock.test.constants";

2. AAA(Arrange, Act and Assert): AAA Explaination

describe("useAxios ", () => {
  
  /** Arrange (Patch Request) */
  it("should make an HTTP PATCH request and return the response data", async () => {
    server.use(
      rest.patch(MOCK_PATCH_URL, (req, res, ctx) => {
        return res(
          ctx.status(200),
          ctx.json({
            patch: MOCK_PATCH_DATA,
          })
        );
      })
    );

    /** Action */
    const { result } = renderHook(() =>
      useAxios(MOCK_PATCH_URL, "patch", {
        data: {
          patch: MOCK_PATCH_DATA,
        },
        withCredentials: true,
      })
    );

    /** Assert /
    expect(result.current.loading).toBe(true);
    expect(result.current.data).toBe(null);
    expect(result.current.error).toBe(null);

     waitFor(() => expect(result.current.loading).toBe(false));
     waitFor(() =>
      expect(result.current.data).toStrictEqual({
        patch: MOCK_PATCH_DATA,
      })
    );
     waitFor(() => expect(result.current.error).toBe(null));
  });
});

3. Setup and Teardown :
   Often while writing tests you have some setup work that needs to happen before tests run, and you have some finishing work that needs to happen after tests run. Jest provides helper functions to handle this.(setup and teardown).
   In this before Each will clear all mock before next test.
   so there will be no conflict between test.
   Always use befaoreEach , beforeAll and afterEach according to the case.

/**Third Party Dependencies */
import React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

/**Component Dependencies */
import { ShareButton } from "../shareButton";

beforeEach(() => {
  jest.clearAllMocks();
});

const SHARE_URL = "https://members.realdevsquad.com/";

describe("share button test", () => {
  render(<ShareButton shareUrl={SHARE_URL} />);

  it("tests clipboard", async () => {
    /** Arrange */
    const copyButton = screen.getByText(/copy/i);

    Object.assign(navigator, {
      clipboard: {
        writeText: (text: string) => text,
      },
    });
    const buttonSpy = jest.spyOn(navigator.clipboard, "writeText");

    /**Act */
    userEvent.click(copyButton);
   

    /**Assert */
     waitFor(() => expect(buttonSpy).toBeCalledTimes(1));
  });
});

4. Mocking Jest

• Jest.fn() : It is simplest way of creating mock function. Jest.fn( )

it("returns undefined and has been called correct number of times", () => {
 const mock = jest.fn();

 const result = mock();

 expect(result).toBeUndefined();
 expect(mock).toHaveBeenCalledTimes(1);
 expect(mock).toHaveBeenCalledWith();
});

• Jest.spyOn( ) : Jest to spy on modules . Jest.spyOn( )

ShareButton.tsx

/**Third Party Dependencies */
import React from "react";

type CopyButtonProps = {
    shareUrl : string
}

export function ShareButton({ shareUrl }: CopyButtonProps){
    /**
     * Helper Function for copying msg on clipboard
     */
    const copyHandler = async () => {
      return await navigator.clipboard.writeText(shareUrl);
    };
    return (
      <button type="button" onClick={copyHandler}>
        Copy
      </button>
    );
  };

ShareButton.test.tsx

/**Third Party Dependencies */
import React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

/**Component Dependencies */
import { ShareButton } from "../shareButton";

beforeEach(() => {
  jest.clearAllMocks();
});

const SHARE_URL = "https://members.realdevsquad.com/";

describe("share button test", () => {
  render(<ShareButton shareUrl={SHARE_URL} />);

  it("tests clipboard", async () => {
    /** Arrange */
    const copyButton = screen.getByText(/copy/i);

    Object.assign(navigator, {
      clipboard: {
        writeText: (text: string) => text,
      },
    });
    const buttonSpy = jest.spyOn(navigator.clipboard, "writeText");
    
     /**Act */ 
      userEvent.click(copyButton);
    
    /**Assert */
  
    waitFor(() => expect(buttonSpy).toBeCalledTimes(1));
  });
});

• Jest.mock( ): It is used to mock function and modules. Jest.mock( )

foo-bar-baz.js

export const foo = 'foo';
export const bar = () => 'bar';
export default () => 'baz';

test.js

import defaultExport, {bar, foo} from '../foo-bar-baz';

jest.mock('../foo-bar-baz', () => {
  const originalModule = jest.requireActual('../foo-bar-baz');

  //Mock the default export and named export 'foo'
  return {
    __esModule: true,
    ...originalModule,
    default: jest.fn(() => 'mocked baz'),
    foo: 'mocked foo',
  };
});

test('should do a partial mock', () => {
  const defaultExportResult = defaultExport();
  expect(defaultExportResult).toBe('mocked baz');
  expect(defaultExport).toHaveBeenCalled();

  expect(foo).toBe('mocked foo');
  expect(bar()).toBe('bar');
});

5. For API we are using msw :

• Why we are using ?
  • msw blog Kent C Dodds
  • Offical docs recommending msw
• msw docs

6. react-testing-library
   • We expect you to go through offical docs of react-testing-library.
   • For querying elements we strict about how offical docs recommend .
     • Reason it increases web accesibility.
     • Queries Docs.
     • we expect the same way we use for querying copy button const copyButton = screen.getByText(/copy/i);
   • Async Methods
     • waitFor(() => expect(buttonSpy).toBeCalledTimes(1));
   • Fake Timers
     • In some cases, when your code uses timers (setTimeout, setInterval, clearTimeout, clearInterval), your tests may become
       unpredictable, slow and flaky.
     • beforeEach(() => { jest.useFakeTimers() })
   • UserEvent
     • It will be used as Act method.
     • Basically for all interactions like click, keypress , keyDown and more.
     • Reason : User Event is a companion library for Testing Library that provides more advanced simulation of browser interactions than the built-in fireEvent method.
     • userEvent.click(copyButton)
7. Expect and Matchers
   • For assert method we use expect. It expects some value by components.
   • expect(buttonSpy).toBeCalledTimes(1))

[vvaibhavdesai]

Really nicely done 🚀

[kotesh-arya]

Well Detailed ✨