Testing React Components and Checking Package Dependencies

Introduction:

In this blog post, we will explore a code snippet that demonstrates how to test a React component using the @testing-library/react library and check package dependencies in a React project. The code showcases testing scenarios for a component called FollowUpAndNotes and includes a test suite for checking the project's package.json file.

src

Testing the FollowUpAndNotes Component:

The FollowUpAndNotes component is rendered in two different scenarios to cover different use cases. Let's examine each test case in detail.

Rendering component with followUpData:

The first test case aims to render the component by providing followUpData as a prop and then checks if the expected data is present in the rendered

src
document. Here's the code snippet for this test:

javascript
test("Rendering component with followUpData", () => {
  // Rendering the component with followUpData in props
  render(
    <Provider store={store}>
      <MemoryRouter>
        <DashboardDataProvider>
          <FollowUpAndNotes followUpData={followUpData} />
        </DashboardDataProvider>
      </MemoryRouter>
    </Provider>
  );
`
  // Checking if followUpWith and followUpTimeStamp are present in the document
  const followupWith = screen.queryByText(/with Abidur Rahman Chowdhury/i);
  const followupTimeStamp = screen.queryByText(/30 Aug 2022 03:36 PM/i);

  expect(followupTimeStamp).toBeInTheDocument();
  expect(followupWith).toBeInTheDocument();
});

Rendering component when an internal error occurs:

The second test case verifies the rendering of the component when there is an internal server error. It renders the component without followUpData in the props and sets followupAndNotesInternalServerError to true. The test then checks if the internal server error animation is present in the document. Here's the code snippet for this test:

test("Rendering component when internal error occurs", () => {
  // Rendering the component without followUpData in props and with internal server error
  render(
    <Provider store={store}>
      <MemoryRouter>
        <DashboardDataProvider>
          <FollowUpAndNotes
            followUpData={[]}
            followupAndNotesInternalServerError={true}
          />
        </DashboardDataProvider>
      </MemoryRouter>
    </Provider>
  );

  // Checking if internalServerErrorAnimation is present in the document
  const internalServerErrorAnimation = screen.queryByTestId(/internal-server-error-animation/i);

  expect(internalServerErrorAnimation).toBeInTheDocument();
});

Checking Package JSON:

The code also includes tests to check the correctness of the project's package.json file, which contains the project's dependencies. Here's the code snippet for these tests:

import packageJson from "../../package.json";

describe("Package JSON", () => {
  test("contains the correct package name", () => {
    expect(packageJson.name).toBe("gtcrm");
  });

  test("contains the correct dependencies", () => {
    expect(packageJson.dependencies).toEqual({
      "@emotion/react": "^11.10.6",
      "@emotion/styled": "^11.10.6",
      "@mui/icons-material": "^5.11.16",
      "@mui/lab": "^5.0.0-alpha.66",
      "@mui/material": "^5.11.16",
      "@mui/system": "^5.11.16",
      "@mui/x-date-pickers": "^6.1.0",
      "@reduxjs/toolkit": "^1.9.3",
      "@testing-library/jest-dom": "^5.16.5",
      "@testing-library/react": "^14.0.0",
      "@testing-library/user-event": "^14.4.3",
      apexcharts: "^3.37.3",
      axios: "^1.3.5",
      "chart.js": "^4.2.1",
      classnames: "^2.3.2",
      "d3-scale": "^4.0.2",
      "date-fns": "^2.29.3",
      "font-awesome": "^4.7.0",
      grapesjs: "^0.19.5",
      "grapesjs-preset-webpage": "^0.1.11",
      "js-cookie": "^3.0.1",
      "jwt-decode": "^3.1.2",
      "lottie-web": "^5.11.0",
      react: "^18.2.0",
      "react-apexcharts": "^1.4.0",
      "react-beautiful-dnd": "^13.1.1",
      "react-chartjs-2": "^5.2.0",
      "react-d3-tree": "^3.5.1",
      "react-dom": "^18.2.0",
      "react-email-editor": "^1.7.7",
      "react-error-boundary": "^4.0.3",
      "react-funnel-pipeline": "^0.2.0",
      "react-infinite-scroll-component": "^6.1.0",
      "react-intersection-observer-hook": "^2.1.1",
      "react-joyride": "^2.5.3",
      "react-masonry-css": "^1.0.16",
      "react-medium-image-zoom": "^5.1.3",
      "react-multi-date-picker": "^3.3.4",
      "react-quill": "2.0.0",
      "react-redux": "^8.0.5",
      "react-router-dom": "^6.10.0",
      "react-scripts": "^5.0.1",
      "react-simple-maps": "^3.0.0",
      "react-toastify": "^9.1.2",
      "react-tooltip": "^4.5.1",
      rsuite: "^5.31.0",
      sass: "^1.61.0",
      "simplebar-react": "^3.2.3",
      "web-vitals": "^3.3.1",
      yup: "^1.0.2",
    });
  });

  // Add additional tests as needed
});

---

src

Conclusion:

Testing React components and verifying package dependencies are crucial steps in ensuring the reliability and correctness of a React project. The provided code snippet showcases how to perform these tests using the @testing-library/react library and by accessing the project's package.json file. By following these testing practices, you can enhance the stability and quality of your React applications.

Feel free to adapt and include the code snippets in your blog post, providing appropriate explanations and context.