How to Prevent Issues in a JavaScript Automation Testing Framework With Visual Studio Code and ESLint

Enes K├╝hn

Most of us will agree that working with JS testing frameworks is fun. Within several days or even hours, you can utilize several libraries, get the work done and impress your teammates and management. While creating automated tests at full speed, most of us do not care about formatting issues, possible dead code or runtime issues. Luckily, there is a guy that can do that work for you and prevent headaches ESLint.

Linting is a process that reduces errors and improves the overall quality of your code. Using lint tools can help you accelerate development and reduce costs by finding errors earlier. In other words, it is simply a static code analysis tool used to flag programming errors, bugs, stylistic errors, and suspicious constructs.

Linting vs Debugging

Debugging is something you do manually after a bug is found. Linting can prevent debugging by catching bugs before you manually run your program, by running the code and checking for errors.

Installation

For the purposes of this blog, we will use ESLint for JavaScript.

Prerequisites:

Open the Visual Studio Code and open a sample project. Navigate to extensions, search for “eslint” and install it.

Now add ESLlint to your project as a dev-dependency package.

Go to terminal, navigate to the project root and execute the command below.

npm install --save-dev eslint
Install ESLint as dev dependency

Note: in case you see the blocked ESLINT message in the lower right part of your screen, click on it and Allow Everywhere ESLint package.

After it is added to the project, we need to initialize it. Type in the command below.

eslint --init
Initialize ESLint

Note: in case you see the error message “zsh: command not found: eslint” simply run the above command in the correct folder: ./node_modules/.bin/eslint init

The command will trigger the wizard. Follow the nine steps and configure ESLint for your project:

step 1:

step 2:

For the second step: refer to any class in your test framework (mine is JavaScript and uses import keyword). Open any page class and see references.

Verify any class in the project
Select the correct project type

step 3:

step 4:

step 5:

step 6:

step 7:

At this point, we have an option to choose between three styles (I prefer the Airbnb style). You can find more information about all the styles on the links below:

step 8:

step 9 (finally):

Reality Check

After installation, you ll see a bubble on the right of the PROBLEMS tab. It shows us a number of linting issues in our code. Click on the Problems tab and verify the issues.

You ll notice that a new config file was created in the project. This configuration can be modified per our preferences.

ESLint json config file

Run It From the Terminal

Add the script to package.json:

"eslint": "eslint ./"
Add eslint to the package.json config file

Go to the terminal and execute the command below.

npm run eslint

Verify the results. In my example, things look pretty bad.

Ô£û 2891 problems (2825 errors, 66 warnings)

2315 errors and 0 warnings potentially fixable with the ` fix` option.

How can it be? Almost 3000 errors on such a small project? Not sure if I have 3000 lines of the code in the first place. Something is wrong here! Let us take a closer look at what we did. We executed eslint on everything. Our node_modules are part of everything as well. Some modules are following different style guides or maybe do not follow our style guide. We should fix our config and make eslint look only at our code.

ESLint ignore

Go to terminal and execute the command below.

touch .eslintignore

Open the newly created file and add node_modules as ignore!

Ignore node_modules from linting process

Run the npm run eslint command again and verify the results! Looks better, right?

Now, open your project and verify the issues. You can reveal possible fix options for an issue by clicking on it.

You can easily check issue by issue and find the best solution for it. Fix all auto-fixable problems options will help you a lot.

This is the final step in the process, which brings us to the end of this blog; I hope you found it useful. Until next time, happy testing!

Leave a Reply

Your email address will not be published.

After you leave a comment, it will be held for moderation, and published afterwards.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.