React Testing¶

Libraries and Tools for Ensuring React Component Behavior¶

When working with React, it's essential to ensure that your components and application behave as expected. Here are some commonly used libraries and tools to help you achieve that:

1. React Testing Library¶

Description: React Testing Library is a popular testing utility that encourages testing your components in a way that simulates user interactions and focuses on how your components are used from the user's perspective.
Example: Here's an example of testing a React component with React Testing Library:

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

test('it should render correctly', () => {
  render(<MyComponent />);
  const button = screen.getByRole('button');
  fireEvent.click(button);
  expect(screen.getByText('Clicked')).toBeInTheDocument();
});

2. Jest¶

Description: Jest is a widely used JavaScript testing framework that pairs seamlessly with React Testing Library for writing and executing tests.
Example: Jest can be used in the example above along with React Testing Library to run the test.

3. Enzyme¶

Description: Enzyme is another popular testing utility for React that provides a set of testing utilities for rendering and interacting with components, making it easier to test component behavior.
Example: Here's a basic example of testing a React component with Enzyme:

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

it('renders without crashing', () => {
  const wrapper = shallow(<MyComponent />);
  expect(wrapper.find('button')).toHaveLength(1);
});

4. Redux¶

Description: Redux is a predictable state management library commonly used with React applications. It helps you manage and test the state of your application in a predictable way.
Example: You can use Redux to manage the state of your React components and test the actions and reducers that modify that state.

5. React Developer Tools¶

Description: React Developer Tools is a browser extension that provides a set of debugging and profiling tools for React applications. It allows you to inspect and interact with your React components in the browser's developer console.
Example: Install the extension in your browser and use it to inspect the component hierarchy, state, and props of your React components.

6. Cypress¶

Description: Cypress is an end-to-end testing framework that helps you write and run tests that simulate real user interactions in a web application. It's often used for testing React applications with a focus on user experience.
Example: Writing Cypress tests to simulate user interactions and assert the behavior of React components.

These are just a few of the commonly used libraries and tools in the React ecosystem to ensure your components and application behave as expected. Depending on your specific project requirements, you may choose the ones that best fit your needs. Remember to combine these tools with best practices for testing and debugging to create robust React applications.

7. Storybook¶

Description: Storybook is a development environment and tool for visualizing and interacting with UI components in isolation. It's often used for designing and documenting components, which can aid in testing and ensuring component behavior.
Example: Create a Storybook instance to showcase and test individual React components, providing a visual representation of how they behave and appear in various states.

8. ESLint and Prettier¶

Description: ESLint and Prettier are essential tools for maintaining code quality and style consistency in your React project. ESLint enforces coding standards and catches potential issues, while Prettier formats your code automatically.
Example: Configure ESLint and Prettier to work together in your React project, ensuring clean and consistent code across your components and application.

9. React Router¶

Description: React Router is a popular library for handling routing in React applications. Proper navigation and routing are crucial for ensuring a smooth user experience, and React Router simplifies this task.
Example: Use React Router to set up routing for your React application, and then write tests to ensure that routing works as expected when navigating between different components and routes.

10. Axios or Fetch¶

Description: When your React application communicates with a server or API, libraries like Axios or the built-in Fetch API are commonly used. Testing API calls and responses is essential to ensure proper data flow in your application.
Example: Write tests to mock API requests and responses, ensuring that your components handle data fetching and rendering correctly.

11. Webpack or Create React App¶

Description: Webpack and Create React App are build tools commonly used in React projects. They help bundle, optimize, and serve your application. Properly configured build tools are crucial for production-ready applications.
Example: Set up Webpack or create a project with Create React App, configure it to handle assets, code splitting, and other optimizations, and ensure that the build process works smoothly.

12. Performance Monitoring Tools¶

Description: Tools like Google Lighthouse, Web Vitals, or dedicated performance monitoring libraries can help you identify and fix performance issues in your React application, ensuring a fast and efficient user experience.
Example: Integrate performance monitoring tools into your development workflow to regularly assess your application's performance and address any bottlenecks.

React Testing Library¶

React Testing Library is a JavaScript testing utility that is designed to help you write tests for your React components in a way that closely resembles how a user interacts with your application. It encourages testing from the user's perspective, emphasizing that your tests should focus on behavior rather than implementation details. Let's delve into React Testing Library with clear explanations and examples.

Installation¶

You can install React Testing Library along with Jest, a popular testing framework, to create and run tests for your React components:

npm install --save @testing-library/react @testing-library/jest-dom

Key Concepts¶

Queries: React Testing Library provides a set of query functions to select elements from your component. These queries resemble how a user might find elements on the page. Common queries include getByText, getByRole, getByTestId, and more.
Render: Use render to render your React component into a virtual DOM. This virtual DOM is used for testing and allows you to interact with the component.
Act: The act function from React Testing Library is used to perform interactions with your component, such as clicking buttons, filling out forms, or navigating.
Assertions: Use Jest's built-in assertion library (e.g., expect) to make assertions about your component's behavior based on the queries you've selected.

Example¶

Let's say you have a simple React component named Counter that increments a count when a button is clicked. Here's how you can test it using React Testing Library:

// Counter.js
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

Now, let's write a test for this component:

// Counter.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('increments the count when the button is clicked', () => {
  render(<Counter />);

  // Find the button element
  const button = screen.getByText('Increment');

  // Check if the count starts at 0
  const countElement = screen.getByText('Count: 0');

  // Click the button
  fireEvent.click(button);

  // Check if the count increases
  const updatedCountElement = screen.getByText('Count: 1');
  expect(countElement).not.toBe(updatedCountElement);
});

In this test:

We render the Counter component.
We use the screen.getByText query to find elements with specific text content.
We locate the button and check if the initial count is 0.
We simulate a click on the button using fireEvent.click.
Finally, we verify that the count has increased to 1.

This example demonstrates how React Testing Library encourages testing from the user's perspective by focusing on interactions and expected outcomes, making your tests more robust and maintainable.

Jest¶

Jest is a popular JavaScript testing framework that is widely used for testing React applications and other JavaScript projects. It provides a robust and feature-rich environment for writing and executing tests. Let's explore Jest in more detail with easy-to-understand examples.

Installation¶

You can install Jest in your project using npm or yarn:

npm install --save-dev jest
# or
yarn add --dev jest

Key Concepts¶

Test Suites and Test Cases: Jest organizes tests into test suites and test cases. A test suite is a group of related test cases, and each test case is an individual test.
Matchers: Jest provides a variety of built-in matchers that allow you to make assertions in your tests. Common matchers include toBe, toEqual, toBeTruthy, toContain, and more.
Setup and Teardown: You can use functions like beforeEach, afterEach, beforeAll, and afterAll to set up and tear down necessary resources for your tests.
Mocking: Jest allows you to easily mock modules or functions using its built-in mocking capabilities, making it suitable for isolating components during testing.

Example¶

Let's write a simple Jest test for a JavaScript function that adds two numbers. Here's the function:

// math.js
function add(a, b) {
  return a + b;
}

module.exports = add;

Now, let's write a Jest test for this function:

// math.test.js
const add = require('./math');

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

In this example:

We create a test case using the test function, specifying a description and a test function.
Within the test function, we use the expect function to make an assertion.
We use the toBe matcher to assert that the result of add(1, 2) is equal to 3.

To run this test, you can use the jest command in your project's root directory. Jest will discover and execute all test files with the .test.js or .spec.js extension.

npx jest

Jest provides many additional features, such as snapshots for testing React components, spies for tracking function calls, and async testing capabilities. You can configure Jest to suit your specific project needs.

This example demonstrates how Jest is used to write simple test cases for JavaScript functions. In a React project, you would use Jest along with testing utilities like React Testing Library or Enzyme to test your React components and their behavior.

Enzyme¶

Enzyme is a popular JavaScript testing utility for React that provides a set of tools for testing React components. It makes it easier to render components, interact with them, and make assertions about their behavior. Enzyme is commonly used in conjunction with testing frameworks like Jest. Let's explore Enzyme in more detail with clear explanations and examples.

Installation¶

You can install Enzyme and its adapters to work with React using npm or yarn:

npm install --save enzyme enzyme-adapter-react-{version} enzyme-to-json
# or
yarn add enzyme enzyme-adapter-react-{version} enzyme-to-json

Replace {version} with the React version you are using (e.g., 16, 17, etc.).

Key Concepts¶

Shallow Rendering: Enzyme provides a shallow function that allows you to render a React component one level deep. It's useful for isolating the component you want to test and ignoring its child components.
Mounting: The mount function in Enzyme allows you to render a React component and its child components fully. It simulates a full DOM rendering and is suitable for testing component interactions and lifecycle methods.
Queries and Actions: Enzyme provides various query methods (e.g., find, at, filter) for selecting and interacting with elements within the rendered component. You can also simulate user actions like clicks, input changes, and form submissions.
Assertions: You can use Jest's built-in assertion library (e.g., expect) in combination with Enzyme to make assertions about the component's behavior, state, and props.

Example¶

Let's say you have a simple React component named Counter that increments a count when a button is clicked. Here's how you can test it using Enzyme and Jest:

// Counter.js
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

Now, let's write a test for this component using Enzyme and Jest:

// Counter.test.js
import React from 'react';
import { shallow } from 'enzyme';
import Counter from './Counter';

test('increments the count when the button is clicked', () => {
  const wrapper = shallow(<Counter />);

  // Check if the count starts at 0
  expect(wrapper.find('p').text()).toEqual('Count: 0');

  // Simulate a button click
  wrapper.find('button').simulate('click');

  // Check if the count increases to 1
  expect(wrapper.find('p').text()).toEqual('Count: 1');
});

In this test:

We use the shallow function from Enzyme to shallow render the Counter component.
We use Enzyme's query methods (find) to select elements within the component.
We simulate a button click using simulate and check if the count increases correctly.

This example demonstrates how Enzyme is used to test React components by rendering them and providing a set of methods for querying and interacting with them. It's a powerful tool for testing React components' behavior and interactions.

Redux¶

Redux is a popular state management library for JavaScript applications, especially in the context of React. It helps you manage the application's state in a predictable and centralized way. Redux follows the principles of a single source of truth and unidirectional data flow. Let's explore Redux in detail with clear explanations and examples.

Installation¶

You can install Redux in your project using npm or yarn:

npm install --save redux react-redux
# or
yarn add redux react-redux

Key Concepts¶

Store: The store is the heart of Redux. It holds the entire application's state as a plain JavaScript object. You can think of it as a centralized database for your application.
Actions: Actions are plain JavaScript objects that describe changes to the application's state. They have a type property that indicates the type of action and may include additional data.
Reducers: Reducers are pure functions that specify how the application's state changes in response to actions. They take the current state and an action as input and return a new state.
Dispatch: The dispatch method is used to dispatch (send) actions to the store. It triggers the state change process.
Selectors: Selectors are functions that extract specific pieces of data from the store's state. They help in obtaining data from the store in a structured way.

Example¶

Let's create a simple Redux store and demonstrate its usage in a React application. In this example, we'll have a counter that can be incremented and decremented.

First, let's define our actions and reducers:

// actions.js
export const increment = () => {
  return {
    type: 'INCREMENT',
  };
};

export const decrement = () => {
  return {
    type: 'DECREMENT',
  };
};

// reducers.js
const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
};

export default counterReducer;

Now, let's create the Redux store and integrate it with a React component:

// store.js
import { createStore } from 'redux';
import counterReducer from './reducers';

const store = createStore(counterReducer);

export default store;

// Counter.js
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';

const Counter = ({ count, increment, decrement }) => {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    count: state.count,
  };
};

const mapDispatchToProps = {
  increment,
  decrement,
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

In this example:

We define actions to increment and decrement the counter in the actions.js file.
We create a reducer in the reducers.js file to handle these actions and update the state.
We create a Redux store in the store.js file and configure it with the reducer.
In the Counter.js component, we use the connect function from react-redux to connect the component to the Redux store.
We map the state and actions to props using mapStateToProps and mapDispatchToProps, making them accessible in the component.

Now, you can use the Counter component in your React application, and it will interact with the Redux store to manage and display the counter value.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

ReactDOM.render(
  <Provider store={store}>
    <Counter />
  </Provider>,
  document.getElementById('root')
);

This example demonstrates how Redux can be used to manage the state of a React application in a structured and centralized manner, making it easier to maintain and scale your application's state management.

React Developer Tools¶

React Developer Tools is a browser extension and a set of development tools that provide powerful debugging and profiling capabilities specifically designed for React applications. These tools enable you to inspect, debug, and optimize your React components in a more efficient and convenient way. Let's explore React Developer Tools in detail with clear explanations and examples.

Installation¶

You can install React Developer Tools as a browser extension for Google Chrome or Mozilla Firefox. Search for "React Developer Tools" in your browser's extension store and follow the installation instructions.

Key Features¶

Component Tree Inspection: React Developer Tools allows you to inspect the component hierarchy of your React application. You can see the structure of your components, their props, state, and context.
Props and State Inspection: You can view the props and state of each component in the tree, making it easier to identify and debug issues related to data passing and component behavior.
Component Highlighting: Hovering over components in the DevTools highlights them in your application's UI. This visual representation helps you quickly identify which components are associated with specific elements.
Component Updates: React Developer Tools can show you when a component re-renders and why. It highlights the reason for each render, helping you optimize your components for performance.
Component Editing: You can modify component props and state directly in the DevTools to test different scenarios and see how your components respond to changes.
Profiling: React Developer Tools includes a profiling feature that allows you to record and analyze the performance of your React application. It helps you identify performance bottlenecks and optimize rendering.

Example¶

Let's say you have a React application with a component hierarchy. To use React Developer Tools, follow these steps:

Open your application in a browser that has React Developer Tools installed (e.g., Chrome).
Right-click on an element in your application and select "Inspect" or use the browser's developer tools shortcut (usually F12 or Ctrl+Shift+I).
In the developer tools panel, you'll find a "React" or "Components" tab. Click on it to access the React Developer Tools.
You will see a tree-like structure representing your React component hierarchy. You can expand components to inspect their props, state, and context.
Hovering over a component in the DevTools highlights the corresponding component in your application's UI, making it easy to identify which component you're inspecting.
You can also use the "Profiler" tab in React Developer Tools to record performance profiles and analyze your application's rendering and component interactions.

Here's a visual representation of what React Developer Tools may look like:

React Developer Tools

By using React Developer Tools, you gain valuable insights into your React application's structure, behavior, and performance, which can significantly speed up the debugging and optimization process. It's an essential tool for React developers to have in their toolkit.

Cypress¶

Cypress is an end-to-end testing framework for web applications, including React applications. It enables you to write and run tests that simulate real user interactions with your application, helping you ensure that your application works correctly and efficiently from a user's perspective. Let's explore Cypress in detail with clear explanations and examples.

Installation¶

You can install Cypress globally or locally in your project:

Global Installation (Recommended for Development)

npm install -g cypress
# or
yarn global add cypress

Local Installation (Recommended for CI/CD)

npm install --save-dev cypress
# or
yarn add --dev cypress

Key Features¶

Real Browser Testing: Cypress runs tests in a real browser, allowing you to simulate user interactions like clicks, form submissions, and keyboard input.
Automatic Waiting: Cypress automatically waits for elements to become available and actions to complete, eliminating the need for explicit timeouts or waits in your tests.
Time-Travel Debugging: You can step through your test commands, view the application's state at each step, and even time-travel back to previous steps to debug issues efficiently.
Interactive Test Runner: Cypress provides an interactive test runner that displays test results in real-time, making it easy to identify and debug failing tests.
Parallel Execution: Cypress supports parallel test execution, allowing you to run tests concurrently to save time, especially in CI/CD pipelines.
Network Stubbing and Spying: You can stub or spy on network requests to mock responses or verify that specific requests are made.
Screenshots and Videos: Cypress automatically captures screenshots and videos of your tests, making it easier to diagnose issues and share test results.

Example¶

Let's write a simple Cypress test for a React application that has a counter component similar to previous examples. In this example, we'll create Cypress tests for incrementing and decrementing the counter.

First, ensure you have Cypress installed, then create a new Cypress project:

npx cypress open

This will open the Cypress Test Runner. Create a new test file within the cypress/integration directory, for example, counter.spec.js.

Here's a sample test:

// counter.spec.js
describe('Counter App', () => {
  it('increments the count', () => {
    cy.visit('http://localhost:3000'); // Replace with your app's URL
    cy.get('p').should('have.text', 'Count: 0');
    cy.get('button').contains('Increment').click();
    cy.get('p').should('have.text', 'Count: 1');
  });

  it('decrements the count', () => {
    cy.visit('http://localhost:3000'); // Replace with your app's URL
    cy.get('p').should('have.text', 'Count: 0');
    cy.get('button').contains('Decrement').click();
    cy.get('p').should('have.text', 'Count: -1');
  });
});

In this Cypress test:

We use the cy.visit command to open the React application.
We use cy.get to select elements by their selectors and make assertions about their content and behavior.
We simulate user interactions with cy.get(...).click() to increment and decrement the counter.
Cypress automatically waits for elements to be available and for actions to complete, making the test more robust.

To run the Cypress test, use the Cypress Test Runner:

npx cypress open

Cypress will open a window displaying your test suite. Click on a test to run it interactively. Cypress will provide real-time feedback and show you the state of your application during each test step.

Cypress Test Runner

Cypress is a powerful tool for end-to-end testing, and you can use it to write comprehensive tests for your React applications, ensuring that they work correctly and efficiently from a user's perspective.

Storybook¶

Storybook is an open-source tool for building and documenting UI components in isolation. It's particularly popular in the React ecosystem but supports other frameworks as well. Storybook enables developers to design, develop, and test components independently, making it easier to maintain a consistent and well-documented component library. Let's explore Storybook in detail with clear explanations and examples.

Installation¶

You can install Storybook globally or within your project as a development dependency. The following instructions install Storybook for React:

Global Installation (Recommended for Development)

npm install -g @storybook/cli
# or
yarn global add @storybook/cli

Local Installation (Recommended for Projects)

npx -p @storybook/cli sb init --type react
# or
yarn add --dev @storybook/react

Key Features¶

Component Playground: Storybook provides a dedicated environment for designing and interacting with UI components. You can view components in isolation, test various states, and tweak props without affecting the entire application.
Interactive Development: Developers can create stories for individual components, allowing for interactive development and immediate feedback during component creation and testing.
Documentation: Storybook serves as documentation for your components, making it easy to understand their usage, variations, and props. You can include descriptions, examples, and usage guidelines for each component.
Addon Ecosystem: Storybook has a rich ecosystem of addons that enhance its functionality. Addons cover a wide range of features, from accessibility testing to design systems integration.
Testable Stories: You can write test cases for each story, ensuring that your components behave as expected in different scenarios. This helps maintain component quality and prevents regressions.
Integration with Popular Frameworks: Storybook supports various frontend frameworks, including React, Vue, Angular, and more. You can use Storybook with the framework of your choice.

Example¶

Let's create a simple Storybook example for a React component. We'll create a story for a button component that has different variants. First, ensure that you've installed Storybook for React in your project.

Create a new story file named Button.stories.js within your component directory (e.g., src/components):

// src/components/Button.stories.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from './Button';

// Define a storybook for the button component
storiesOf('Button', module)
  .add('Primary', () => <Button variant="primary">Primary Button</Button>)
  .add('Secondary', () => <Button variant="secondary">Secondary Button</Button>)
  .add('Disabled', () => <Button variant="disabled" disabled>Disabled Button</Button>);

In this example:

We import the storiesOf function from @storybook/react to define a set of stories.
Each .add method defines a story for the Button component with different variants.
The stories showcase the primary, secondary, and disabled states of the button.

Now, run Storybook to view and interact with your component stories:

npx storybook

Storybook will start a local development server and open a web page displaying your component stories. You can navigate between different stories, see the component in isolation, and test its behavior.

Storybook Example

By using Storybook, you can create an extensive library of documented and testable UI components. This makes it easier for your team to collaborate, maintain a consistent design system, and ensure the quality of your components across your application.

ESLint and Prettier¶

ESLint and Prettier are two essential tools in the JavaScript ecosystem that help developers maintain code quality, enforce coding standards, and ensure consistent code formatting. They are often used together to create a robust and clean codebase. Let's explore ESLint and Prettier in detail with clear explanations and examples.

ESLint¶

ESLint is a static code analysis tool that identifies and reports problems in JavaScript code. It enforces coding standards and best practices, helping developers catch errors, improve code quality, and maintain a consistent code style. ESLint is highly configurable and supports various JavaScript environments, including React.

Installation¶

You can install ESLint globally or locally in your project:

Global Installation (Not Recommended)

npm install -g eslint
# or
yarn global add eslint

Local Installation (Recommended)

npm install --save-dev eslint
# or
yarn add --dev eslint

Key Features¶

Customizable Rules: ESLint allows you to configure a set of rules to enforce coding standards specific to your project. You can choose from a wide range of built-in rules or create custom rules.
Integration with Editors: ESLint integrates with popular code editors, providing real-time feedback and suggestions as you write code. Editors like Visual Studio Code and Sublime Text offer ESLint extensions.
Automatic Fixing: ESLint can automatically fix many common issues, such as indentation, spacing, and unused variables, using the --fix flag in the command line.
Plugin Ecosystem: ESLint has a rich ecosystem of plugins that extend its functionality. You can find plugins for React, TypeScript, and many other technologies.
Configurable: You can create ESLint configuration files (.eslintrc.js, .eslintrc.json, etc.) to define your project's coding standards and share them with your team.

Prettier¶

Prettier is an opinionated code formatter that automatically formats your code to adhere to a consistent style. It focuses on code formatting aspects like indentation, line breaks, and code alignment, rather than enforcing coding rules.

Installation¶

You can install Prettier globally or locally in your project:

Global Installation (Not Recommended)

npm install -g prettier
# or
yarn global add prettier

Local Installation (Recommended)

npm install --save-dev prettier
# or
yarn add --dev prettier

Key Features¶

Consistent Formatting: Prettier ensures that your code is consistently formatted according to a predefined set of rules, reducing the need for manual code formatting.
Automatic Formatting: Prettier can be integrated into your code editor, build process, or version control system to automatically format your code on save or before committing changes.
Language Support: Prettier supports various languages, including JavaScript, TypeScript, HTML, CSS, and more. It is highly extensible, and support for additional languages can be added through plugins.
Configurable: While Prettier enforces code formatting, it does allow limited configuration for line length and other basic settings.

Using ESLint and Prettier Together¶

ESLint and Prettier complement each other and are often used together to achieve code quality and consistent formatting. Here's how you can use them together:

Install ESLint and Prettier: Install both ESLint and Prettier in your project, as shown in the installation instructions above.
Create ESLint Configuration: Configure ESLint to use Prettier for code formatting. You can use ESLint's eslint-config-prettier plugin to disable any ESLint rules that conflict with Prettier.

Example .eslintrc.js configuration:

   module.exports = {
     extends: ['eslint:recommended', 'plugin:prettier/recommended'],
   };

Create Prettier Configuration: Create a .prettierrc.js configuration file to define your code formatting preferences for Prettier.

Example .prettierrc.js configuration:

   module.exports = {
     semi: true,
     singleQuote: true,
     trailingComma: 'all',
   };

Integrate with Editors: Install ESLint and Prettier extensions in your code editor to get real-time feedback and automatic code formatting while you write code.
Configure Git Hooks: Set up Git hooks to run ESLint and Prettier before committing code changes. This ensures that all code contributions adhere to coding standards and formatting rules.

By using ESLint and Prettier together, you can maintain a clean and consistent codebase while enforcing coding standards and automatically formatting your code. This combination is widely adopted in modern JavaScript development.