What is Software Testing?

Testing is a method to check whether the actual output matches expected output and to ensure that program is Defect Free.

Testing is of 2 Types

  1. Manual Testing
  2. Automation Testing

Manual Testing - Test all the TestCases Manual , Preview and Test in Browser.

  • It is an End User Testing.
  • The Problem is it is very hard to test all the scanrios manually.
  • Takes lot of time and patience.

Automation testing

  • Write code to Test the Application Code.
  • You can test the individual unit of code.
  • Faster and Accurate way to Test
  • Can cover most of the test scanarios.

Different Kind of Automation Testing...

Unit Testing Integeration Testing End to End Testing
Test the small unit e.g (component or function) in isolation Combined and Test the Things Testing the Complete Functionality
For Each Component there are several testcases you can write. Combining units and test as Integeration Doing by the Automation Tester
This is the most common way of Testing. Companies mainly foucs on unit testing but also doing integeration also Can also be do Manually

Things Need it

Comes with React Project, No need to install Jest and React Testing Library.

Writing First Unit Test Case e.g A.test.js file.

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

test('renders Counter App Example ', () => {
  render(<A />);
  const pTag = screen.getByText(/Counter App Example/i);
  expect(pTag).toBeInTheDocument();
});

running test

npm test

Define a TestSuite.

import { render, screen } from '@testing-library/react';
import A from './A';
describe('A Suite',()=>{
test('renders Counter App Example ', () => {
  render(<A />);
  const pTag = screen.getByText(/Counter App Example/i);
  expect(pTag).toBeInTheDocument();
});
});

The Component we are Testing e.g A.jsx

import { usePlusHook } from "../hooks/plus-hook"

export const A = ()=>{
    const [counter, plus, minus]  = usePlusHook(0);
    return (<>
    <p>Counter App Example</p>
    <button onClick={plus}>+</button>
    <button onClick={minus}> - </button>
    <p>Counter is {counter}</p>
    </>
    )
}

Custom hook code e.g plus-hook.js

import { useState } from "react"

export const usePlusHook = (count=0)=>{
    const [counter, setCounter] = useState(count);
    const plus = ()=>{
        setCounter(counter+1);
    }
    const minus = ()=>{
        setCounter(counter-1);
    }
    return [counter, plus, minus];
}

Exact Match

import { render, screen } from '@testing-library/react';
import A from './A';
describe('A Suite',()=>{
test('renders Counter App Example ', () => {
  render(<A />);
  const pTag = screen.getByText('Counter App',{exact:false});
  expect(pTag).toBeInTheDocument();
});
});

Complete TestCases

import  { render, screen,fireEvent } from '@testing-library/react';
import {A} from './A';
import userEvent from "@testing-library/user-event";
describe('A Suite',()=>{
test('renders Counter App Example ', () => {
  render(<A />);
  const pTag = screen.getByText(/Counter App Example/i);
  expect(pTag).toBeInTheDocument();
});
test('renders Counter App Not Exact Test ', () => {
    render(<A />);
    const pTag = screen.getByText('Counter App',{exact:false});
    expect(pTag).toBeInTheDocument();
  });

  test('plus button click and test ', async() => {
    render(<A />);
    const button = screen.getByTestId('plus');
    fireEvent.click(button);
    const r = screen.getByTestId('result');
    
    expect(r).toHaveTextContent('1');
    
  });

});

That's All Folks, Happy Learning :)