How to write unit tests in Next js to pass Sonaqube

Writing unit tests is an essential part of maintaining code quality and ensuring that your application works as expected. In the context of Next.js, which is a popular React framework, you can use various testing libraries such as Jest and Testing Library to write unit tests.

To achieve a high code quality score on SonarQube, it’s crucial to cover your code with tests and follow best practices. The following steps outline how to write unit tests in Next.js and ensure a SonarQube quality gate of at least 95 percent. Please note that achieving a specific SonarQube score also depends on other factors like code complexity, maintainability, and security issues, which might not be solely addressed by unit tests.

1. Set Up Your Next.js Project

Make sure you have a Next.js project set up. If you haven’t already, you can create a new Next.js app using the following commands:

npx create-next-app my-nextjs-app
cd my-nextjs-app

2. Install Testing Dependencies

Next.js projects usually come with Jest as the default testing library. Additionally, you can use the Testing Library to write more effective tests. Install these dependencies:

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

3. Configure Jest

Create a jest.config.js file in the root of your project to configure Jest:

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
};

Create a setupTests.js file in the root of your project to set up the Testing Library:

// setupTests.js
import '@testing-library/jest-dom';

4. Write Unit Tests

Now, you can start writing unit tests for your Next.js components and functions. Create a __tests__ directory next to your components or pages and place your test files there.

Here’s an example of a simple component test:

// components/MyComponent.js
import React from 'react';

const MyComponent = ({ text }) => {
  return <div>{text}</div>;
};

export default MyComponent;

// components/__tests__/MyComponent.test.js
import React from 'react';
import { render, screen } from '@testing-library/react';
import MyComponent from '../MyComponent';

test('renders text correctly', () => {
  render(<MyComponent text="Hello, World!" />);
  expect(screen.getByText('Hello, World!')).toBeInTheDocument();
});

5. Coverage Report

To ensure high code coverage, you can generate a coverage report during testing. Update your jest.config.js file to include coverage settings:

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
  collectCoverage: true,
  collectCoverageFrom: ['**/*.{js,jsx}', '!**/node_modules/**', '!**/vendor/**'],
  coverageThreshold: {
    global: {
      branches: 95,
      functions: 95,
      lines: 95,
      statements: 95,
    },
  },
};

This configuration sets a coverage threshold of 95 percent for branches, functions, lines, and statements.

6. Run Tests

Run your tests using the following command:

npm test

This will execute your unit tests and generate a coverage report.

7. SonarQube Integration

Integrate SonarQube into your project to analyze code quality. You need to have the SonarQube server running and configured. Use the SonarScanner to analyze your project:

npm install sonarqube-scanner --save-dev

Add a sonar-project.properties file to the root of your project:

# sonar-project.properties
sonar.projectKey=my-nextjs-app
sonar.projectName=My Next.js App
sonar.sourceEncoding=UTF-8
sonar.sources=pages,components # Add other relevant source directories
sonar.tests=__tests__
sonar.javascript.lcov.reportPaths=coverage/lcov-report/lcov.info

Update your package.json file with a script to run the SonarScanner:

{
  "scripts": {
    "sonar": "sonar-scanner"
  }
}

Run the SonarScanner:

npm run sonar

This will analyze your project and send the results to the SonarQube server.

Conclusion

Writing unit tests, ensuring high code coverage, and integrating tools like SonarQube are crucial steps in maintaining code quality. While achieving a specific score on SonarQube is important, it’s equally essential to focus on overall code quality, readability, and maintainability. Regularly reviewing and updating your tests and codebase will contribute to a more robust and reliable application.