JavaScript Basics | Tools cover image

JavaScript Basics | Tools

Jonathan Barrios • September 9, 2020

javascript

Introduction

Welcome to the JavaScript Basics series for beginners. In part 9 of JavaScript Basics, we'll dive into linting with ESLint, formatting with Prettier and testing with Jest. See you there!

Prerequisites

To get the most out of this course, you should know:

In Part 9 of JavaScript Basics, we'll focus on:

Note: It takes years of focused practice to become a great JavaScript engineer. This JavaScript Basics course is an introduction to JavaScript fundamentals and will improve your coding skills, but don't expect to transform into a JavaScript expert overnight instantly. Remember, the JavaScript learning journey is a marathon, not a sprint.

Linting with ESLint

Lint in programming, refers to code that might work but has some issues which could cause bugs. A linter, finds the lint in your code so you can fix it, improving the quality of your code. Teams use linting to make their code uniform, clearer to read and easier to maintain. ESLint is a popular linter which can be implemented with a Visual Studio Code plugin by Dirk Baeumer aptly named ESLint.

The ESLint extension integrates with Visual Studio Code and uses the ESLint library installed in the opened workspace folder. If you haven't installed ESLint either locally or globally, you can do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install. To learn more visit the ESLint website page on getting started.

Formatting with Prettier

As I mentioned earlier, a good reason to use ESLint is to make your code more readable and to prevent bugs. Writing clean, easy to read code is paramount when working with teams and Prettier is a modern approach to parse and reformat your code. In fact, you can use ESLint and Prettier to make your code match the Airbnb style guide. Using both ESLint and Prettier is a great solution that requires a bit of configuration and customizing but well worth the effort.

Unit testing with Jest

Jest is a JavaScript testing framework with a focus on ease of use and works with projects using: Babel, TypeScript, Node.js, React, Angular, Vue.js and Svelte. To get started, run npm init -y in the project root directory, then install jest using the npm i --save-dev jest command. If we open the package.json file, we can change the test parameter as follows: test: "jest". This will run jest when we enter the npm test command. Try it out and it will fail, as expected.

For example, we'll use a file named sum.js with the following code:

function sum(a, b) {
  return a + b
}

module.exports = sum

Note that it exports the sum function for us. To run a test, create a file, in the same directory, named sum.test.js. Inside we can write a test.

const sum = require('./sum')

test('correctly adds two numbers', () => {
    if (sum(1,2) === 3) {
        SOME CODE
    } else {
        THROW ERROR
    }
})

Jest allows us to use a simple notation for tests:

const sum = require('./sum')

test('correctly adds two numbers', () => {
  expect(sum(1, 2)).toBe(3)
})

Save your file and run npm test to run your first test.

Now that you finished part 12 of JavaSctipt Basics, we're done! Follow me on Twitter @_jonathan_codes for more JavaScript Basics and other web development frameworks, databases, and more. As always, Happy coding! 👋🏼