What! your code is working fine but the result is not as expected and now it's too late. So you did not test your code at the component level and now your product is ready without a valid test. What if you can make some level of testing without writing a single test code.

Let's first see how basic testing works

You write a feature code that will perform a division between two numbers.

const division = (a,b) => a*b

But when you use that feature it is doing product of the numbers instead of division.

const result = division(10,2)
console.log(result)
//20

So let us try to test this feature by writing a simple test case.

const expected = 5

if(result!==expected){
    throw new Error(`${result} is not equal to ${expected}`);
}

//Error: 20 is not equal to 5

We tested the code and found that there is something wrong with the division feature and will fix that. There can be different ways to write test code and can also use test libraries like Jest.

This was about how basic testing works but we wanted some level of testing without writing test code (we can call it static testing) like :

• Get warnings when code may not be intuitive

• Flagging bugs in your code from syntax errors

• Providing suggestions for common best practices

• Keeping a consistent code style

• Code Formatting

We can achieve these features in our Project using 2 tools:

1. ESlint

"ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs" - ESlint.org

ESlint helps in identifying errors continuously while writing the code. It can also provide auto-fixes for better code.

Install ESlint package from npm in your project.

npm install eslint --save-dev

Now add the eslint rules. After running eslint --init, a .eslintrc.{js,yml,json} file be created in project directory. In this, you can configure the rules to check your code.

eslint --init

It will have certain rules, which you can configure according to the use case.

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

The .eslintrc.{js,yml,json} configuration file will also include the line "extends" . ESLint has provided some recommended rules which you can use for your project by just extending them like this:

{
    "extends": "eslint:recommended"
}

Along with the ESLint package, you can also install ESlint plugin in your code editor to make things easier.

Now you can fix your linting issues in your all files using :

$ npx eslint --fix .

2- Prettier

Prettier is a code formatter that will format your code as desired. Prettier enforces a consistent code style across your entire codebase.

In simple words, if you write your code like this :

function doSomething(             arg1,         arg2 ) { console.log("does something great");
}

then prettier will format your code into this :

function doSomething(arg1, arg2 ){
         console.log("does something great");
}

For this first install prettier in your project :

npm install --save-dev --save-exact prettier

Then, create an empty config file .prettierrc.json to let editors and other tools know you are using Prettier.

And now you can format all your file using :

npx prettier --write .

Prettier can also be configured according to the use case and you can learn more about it from prettier documentation.