How to add test cases to your React Typescript App
Published: 2023-01-16 13:49:55

## **Introduction**

This blog will help you learn what the React Testing Library is and how to use it to test your React application.

## **Table of Contents**:

1. Introduction to React testing library
2. React Testing Library Methods for Finding Elements
3. Three blocks of test cases(AAA)
4. How to write test cases for react project
5. Reference link for React testing library
6. GitHub link
7. Codesandbox link
8. Conclusion
 

## **Introduction to React testing library**:

React Testing Library is a testing utility tool that's built to test the actual DOM tree rendered by React on the browser. The goal of the library is to help you write tests that resemble how a user would use your application. This can give you more confidence that your application works as intended when a real user does use it.

## **React Testing Library Methods for Finding Elements**:

Most of your React test cases should use methods for finding elements. React Testing Library provides you with several methods to find an element by specific attributes in addition to the getByText() method.

- getByText(): find the element by its textContent value
- getByRole(): by its role attribute value
- getByLabelText(): by its label attribute value
- getByPlaceholderText(): by its placeholder attribute value
- getByAltText(): by its alt attribute value
- getByDisplayValue(): by its value attribute, usually for <input> 
  elements
- getByTitle(): by its title attribute value 


## **Three blocks of test cases(AAA)**:

  - Arrange : The render method renders a React element into the 
     DOM.

  ```javascript
    render(<Fetch url="/greeting" />)
  ```
  - Act : The fireEvent method allows you to fire events to 
     simulate user actions.

```javascript
   await act(async () => {
      fireEvent.click(RegisterButton);
    });
```

  - Assert : A custom matcher from jest-dom.

```javascript
   expect(getByTestId('firstName')).toBeInTheDocument();
```

## **Steps to add tests**:

**Step 1: Install React Testing Library**

- We are using the below-linked project as a base for writing test 
  cases.
  You can refer to the link below.
  (https://github.com/SenjaliyaMansi/React-Test-Cases-Demo)

- You can add react testing library via npm & Yarn like:
```javascript
npm install --save-dev @testing-library/react
                OR
yarn add --dev @testing-library/react
```

**Step 2: Getting Started**

- **'npm start**': Starts the development server.
- **'npm run build'**: Bundles the app into static files for production.
- **'npm test'**: Starts the test runner.

**Step 3: Optional: Add the react code to the project**

**1. Creating the form**

```javascript
import React from 'react';
import { Formik, Field, Form } from 'formik';
import * as Yup from 'yup';
import 'bootstrap/dist/css/bootstrap.min.css';
import './FormTable.css';

interface Values {
  firstName: string;
  lastName: string;
  email: string;
  password: string;
  confirmPassword: string;
}

const FormTable = () => {
  const validateEmail = (value: any) => {
    let error;
    if (!value) {
      error = 'please fill the details';
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
      error = 'Invalid email address';
    }
    return error;
  };

  const SignUpSchema = Yup.object().shape({
    firstName: Yup.string()
      .min(5, 'Should be 5 character long')
      .max(15, 'should not exceed 15 characters')
      .required('FirstName is required'),
    lastName: Yup.string()
      .min(5, 'Should be 5 character long')
      .max(15, 'should not exceed 15 characters')
      .required('LastName is required'),
    email: Yup.string()
      .email('invalid email address')
      .required('Email is required'),
    password: Yup.string()
      .required('Password is required')
      .min(6, 'Password must be at least 6 characters')
      .max(40, 'Password must not exceed 40 characters'),
    confirmPassword: Yup.string()
      .required('Confirm Password is required')
      .oneOf([Yup.ref('password'), null], 'Your Password does not match'),
  });

  return (
    <div data-testid="sign-up-form">
      <Formik
        initialValues={{
          firstName: '',
          lastName: '',
          email: '',
          password: '',
          confirmPassword: '',
        }}
        validationSchema={SignUpSchema}
        onSubmit={(values: Values) => {
          console.log('values', values);
        }}
      >
        {({ errors, touched, values }) => (
          <>
            <section>
              <div className="mask d-flex align-items-center h-100 gradient-custom-3">
                <div className="container h-100">
                  <div
                    className="row d-flex justify-content-center align-items-center h-100"
                    style={{ marginTop: '55px', marginBottom: '55px' }}
                  >
                    <div className="col-12 col-md-9 col-lg-7 col-xl-6">
                      <div className="card" style={{ borderRadius: '15px' }}>
                        <div className="card-body p-5">
                          <h2 className="text-uppercase text-center mb-5">
                            Create an account
                          </h2>
                          <Form>
                            <div
                              className="form-outline mb-4"
                              data-testid="firstName"
                            >
                              <label className="mb-2">First Name</label>
                              <Field
                                name="firstName"
                                type="text"
                                className="form-control pl-2"
                                placeholder="First Name"
                                value={values.firstName}
                              />
                              {errors.firstName && touched.firstName && (
                                <div
                                  className="text-danger"
                                  data-testid="error-firstName"
                                >
                                  {errors.firstName}
                                </div>
                              )}
                            </div>
                            <div
                              className="form-outline mb-4"
                              data-testid="lastName"
                            >
                              <label className="mb-2">Last Name</label>
                              <Field
                                name="lastName"
                                type="text"
                                className="form-control pl-2"
                                placeholder="Last Name"
                                value={values.lastName}
                              />

                              {errors.lastName && touched.lastName && (
                                <div
                                  className="text-danger"
                                  data-testid="error-lastName"
                                >
                                  {errors.lastName}
                                </div>
                              )}
                            </div>

                            <div
                              className="form-outline mb-4"
                              data-testid="password"
                            >
                              <label className="mb-2">Password</label>
                              <Field
                                name="password"
                                type="password"
                                className="form-control pl-2"
                                value={values.password}
                              />
                              {errors.password && touched.password && (
                                <div
                                  className="text-danger"
                                  data-testid="error-password"
                                >
                                  {errors.password}
                                </div>
                              )}
                            </div>

                            <div
                              className="form-outline mb-4"
                              data-testid="confirmPassword"
                            >
                              <label className="mb-2">Confirm Password</label>
                              <Field
                                autoComplete="on"
                                name="confirmPassword"
                                type="password"
                                className="form-control pl-2"
                                value={values.confirmPassword}
                              />
                              {errors.confirmPassword &&
                                touched.confirmPassword && (
                                  <div
                                    className="text-danger"
                                    data-testid="error-confirmPassword"
                                  >
                                    {errors.confirmPassword}
                                  </div>
                                )}
                            </div>

                            <div
                              className="form-outline mb-4"
                              data-testid="email"
                            >
                              <label className="mb-2"> Email </label>
                              <Field
                                name="email"
                                type="email"
                                value={values.email}
                                data-testid="emailAddress"
                                validate={validateEmail}
                                placeholder="john@example.com"
                                className="form-control pl-2"
                              />
                              {errors.email && touched.email && (
                                <div
                                  className="text-danger"
                                  data-testid="error-email"
                                >
                                  {errors.email}
                                </div>
                              )}
                            </div>

                            <div className="form-check d-flex justify-content-center mb-5">
                              <input
                                className="form-check-input me-2"
                                type="checkbox"
                                value=""
                                id="form2Example3cg"
                              />
                              <label
                                className="form-check-label"
                                htmlFor="form2Example3g"
                              >
                                I agree all statements in{' '}
                                <a href="#!" className="text-body">
                                  <u>Terms of service</u>
                                </a>
                              </label>
                            </div>

                            <div className="d-flex justify-content-center">
                              <button
                                type="submit"
                                data-testid="Register-target-btn"
                                className="btn btn-success btn-block btn-lg gradient-custom-4 text-body"
                              >
                                Register
                              </button>
                            </div>

                            <p className="text-center text-muted mt-5 mb-0">
                              Have already an account?{' '}
                              <a href="#!" className="fw-bold text-body">
                                <u>Login here</u>
                              </a>
                            </p>
                          </Form>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </>
        )}
      </Formik>
    </div>
  );
};
export default FormTable;

```

 **Source file link:** https://github.com/SenjaliyaMansi/React-Test-Cases-Demo/blob/master/src/FormTable.tsx

- Create the Form with Formik.
- Add Validation with Yup. 
- Custom Validation Rules.
- On submit form event, display the form element value in the card component.

**Step 4: Add command for running test cases in the package JSON file**

 

```javascript
 "test": "react-scripts test"

 // It will run all file test cases
 "test: all": "react-scripts test --watchAll=false -u"

 // It will check the coverage of the file
 "test: coverage": "test: all --coverage"
```
 

**Step 5: Add test cases**

1. Create a FormTable folder inside the src folder
2. Create a **__ tests__** folder inside the FormTable folder
3. Create **Formtable.test.tsx** file inside the **__ tests__** 
   folder for writing test cases for react code

```javascript
import { fireEvent, render, screen } from '@testing-library/react';
import { createRenderer } from 'react-test-renderer/shallow';
import FormTable from '../FormTable';
import { act } from 'react-test-renderer';

const renderer = createRenderer();

const defaultComponent = <FormTable />;

describe('<App />', () => {
  it('should render and match the snapshot', () => {
    renderer.render(defaultComponent);
    const renderedOutput = renderer.getRenderOutput();
    expect(renderedOutput).toMatchSnapshot();
  });

  it('should have correct label', () => {
    const { getByTestId } = render(defaultComponent);
    expect(getByTestId('sign-up-form')).toBeTruthy();
  });

  it('Register button is clickable', async () => {

    // Arrange
    const { getByTestId } = render(defaultComponent);
    const RegisterButton = getByTestId('Register-target-btn');

    // Act
    await act(async () => {
      fireEvent.click(RegisterButton);
    });

    // Assert
    expect(getByTestId('Register-target-btn')).toBeVisible();
  });

  it('A valid form data submit', async () => {
    const { getByTestId } = render(defaultComponent);
    const RegisterButton = getByTestId('Register-target-btn');

    await act(async () => {
      fireEvent.click(RegisterButton);
    });

    expect(getByTestId('firstName')).toBeInTheDocument();
    expect(getByTestId('lastName')).toBeInTheDocument();
    expect(getByTestId('email')).toBeInTheDocument();
    expect(getByTestId('password')).toBeInTheDocument();
    expect(getByTestId('confirmPassword')).toBeInTheDocument();
  });

  it('A validation message on form data Register', async () => {
    const { getByTestId } = render(defaultComponent);
    const RegisterButton = getByTestId('Register-target-btn');

    await act(async () => {
      fireEvent.click(RegisterButton);
    });

    expect(getByTestId('error-firstName')).toHaveTextContent(
      'FirstName is required',
    );
    expect(getByTestId('error-lastName')).toHaveTextContent(
      'LastName is required',
    );
    expect(getByTestId('error-password')).toHaveTextContent(
      'Password is required',
    );
    expect(getByTestId('error-confirmPassword')).toHaveTextContent(
      'Confirm Password is required',
    );
    expect(getByTestId('error-email')).toHaveTextContent('Email is required');
  });

  it('Check the email value', async () => {
    const { getByTestId } = render(defaultComponent);
    const RegisterButton = getByTestId('Register-target-btn');
    const emailField = screen.getByTestId('emailAddress');

    await act(async () => {
      fireEvent.change(emailField, {
        target: { value: 'test00hfhdhhfgmailco' },
      });

      RegisterButton.dispatchEvent(new Event('submit'));
    });

    expect(getByTestId('emailAddress')).toBeTruthy();
  });
});

```

**Source file link:**  https://github.com/SenjaliyaMansi/React-Test-Cases-Demo/blob/master/src/__tests__/FormTable.test.tsx

**How to write test cases for form component**

- Render the snapshot for the form component using the 
   toMatchSnapshot except for the method of testing the library. 
   'toMatchSnapshot': This ensures that a value matches the most 
   recent snapshot.

```javascript
describe('<App />', () => {
  it('should render and match the snapshot', () => {
    renderer.render(defaultComponent);
    const renderedOutput = renderer.getRenderOutput();
    expect(renderedOutput).toMatchSnapshot();
  });
});
```

- Add data-test id in HTMLElement to check the element is present 
   in the code. To provide a unique data-test id attribute for 
   each component. 'data-test id': It is an attribute used to 
   identify a DOM node for testing purposes. It should use as a 
   handler for the test code. We need to make sure its value is 
   unique. 

![Add data-test id](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upsqjkbsuuax7aq5wba7.png)

```javascript
  it('should have correct label', () => {
    const { getByTestId } = render(defaultComponent);
    expect(getByTestId('sign-up-form')).toBeTruthy();
  });
```

- Write test cases on getByTestId using data-test id.
   for example,
      data-test id = 'sign-up form'
      expect(getByTestId('sign-up form')).toBeTruthy();
we can use different expected methods for test cases. 

- Write test cases on submit button click using fireEvent.

```javascript
   it('Register button is clickable', async () => {
    const { getByTestId } = render(defaultComponent);
    const RegisterButton = getByTestId('Register-target-btn');

    await act(async () => {
      fireEvent.click(RegisterButton);
    });

    expect(getByTestId('Register-target-btn')).toBeVisible();
  });
```

- Write test cases to check valid form data on submit button

```javascript
  it('A valid form data submit', async () => {
    const { getByTestId } = render(defaultComponent);
    const RegisterButton = getByTestId('Register-target-btn');

    await act(async () => {
      fireEvent.click(RegisterButton);
    });

    expect(getByTestId('firstName')).toBeInTheDocument();
    expect(getByTestId('lastName')).toBeInTheDocument();
    expect(getByTestId('email')).toBeInTheDocument();
    expect(getByTestId('password')).toBeInTheDocument();
    expect(getByTestId('confirmPassword')).toBeInTheDocument();
  });
```

- Write test cases to validate messages on form data submitted

```javascript
 it('A validation message on form data Register', async () => {
    const { getByTestId } = render(defaultComponent);
    const RegisterButton = getByTestId('Register-target-btn');

    await act(async () => {
      fireEvent.click(RegisterButton);
    });

    expect(getByTestId('error-firstName')).toHaveTextContent(
      'FirstName is required',
    );
    expect(getByTestId('error-lastName')).toHaveTextContent(
      'LastName is required',
    );
    expect(getByTestId('error-password')).toHaveTextContent(
      'Password is required',
    );
    expect(getByTestId('error-confirmPassword')).toHaveTextContent(
      'Confirm Password is required',
    );
    expect(getByTestId('error-email')).toHaveTextContent('Email is required');
  });
```

- Write test cases to check the email value

```javascript
 it('Check the email value', async () => {
    const { getByTestId } = render(defaultComponent);
    const RegisterButton = getByTestId('Register-target-btn');
    const emailField = screen.getByTestId('emailAddress');

    await act(async () => {
      fireEvent.change(emailField, {
        target: { value: 'test00hfhdhhfgmailco' },
      });

      RegisterButton.dispatchEvent(new Event('submit'));
    });

    expect(getByTestId('emailAddress')).toBeTruthy();
  });
```

**Step 6: Edit your package JSON file for some rules for react testing library (coveragePathIgnorePatterns [array<string>])**

**Source file link:** https://github.com/SenjaliyaMansi/React-Test-Cases-Demo/blob/master/package.json

```javascript
"jest": {
    "coveragePathIgnorePatterns": [
      "src/index.tsx",
      "src/reportWebVitals.ts"
    ]
  }
```

- **coveragePathIgnorePatterns:**  That matched against all file paths before executing the test. Coverage information will skip if the file path matches any patterns.

**Step 7: Check the test cases coverage** 

- Run the **yarn run test:all --coverage** command

![show code coverage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bolbfksqpsslmswdmkmc.png)

**Output**

![Form final output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6uvs9865ehy10xsflvr8.png)

**Reference link for React testing library**

https://testing-library.com/docs/react-testing-library/intro
https://jestjs.io/docs/expect

**GitHub link**	

https://github.com/SenjaliyaMansi/React-Test-Cases-Demo

**Codesandbox link**

https://codesandbox.io/p/github/SenjaliyaMansi/React-Test-Cases-Demo/master


**Conclusion**

You’re done with the code.

We hope your code is working as expected. To make your task even easier we have created GitHub Repo at https://github.com/SenjaliyaMansi/React-Test-Cases-Demo You can try the running demo app.

##**About Author**

I **Mansi Senjaliya** started my career journey in 2022 as a React developer at [The One Technologies.](https://theonetechnologies.com/)