Cheat sheet on JavaScript Testing for beginners

Photo by freestocks on Unsplash

Cheat sheet on JavaScript Testing for beginners

Testing in software engineering is a major concept in building a great product especially a product with lot of users, which you might want to avoid software breakage. As a beginner in this space, I am sure you would have come across job applications which their requirement state "Knowledge in unit testing", what the heck is testing then. Hold up, that is why I wrote this blog post. In this post you will learn the basic concept of Software testing, and how Testing can be done with JavaScript. Lastly I will work you through list of keyword you can use when you want to test JavaScript components, so let's dive in!

What is Software Testing

Software Testing is a method to check whether software product work as intended so as to identify errors, gaps or missing requirements in contrast to actual requirements. A software product that's tested properly could guarantee the engineers high performance, reliability and confidence which further results to user satisfaction.

Commonly as a new developer, you will be exposed to two methods of testing you software or web applications, which are:

  • Unit Testing: This is a common method of testing that all developers must have knowledge in, it involves testing the individual unit/pieces of the program to check if program requirements works as intended. Developer could test each program functions, variables, loops, API endpoints all in isolation so as to know if all work in sync with the intended requirement.

  • Integrated Testing: This is a method in testing where all components and modules of a software are tested to check the compatibility and integration of the different components. Integration testing validates the integrity of the whole application.

Today we will focus on how to carry out unit testing on our JavaScript web application. JavaScript is a robost programming language which as I write, can be used for virtually all tech products, whether a web application, mobile app development, building web servers and technologies and even game development. JavaScript has a bunch of framework to run test such as Mocha, Jest, Selenium web driver, Jasmine e.t.c

We will focus on the basic of using Jest to carry out unit testing.

For this tutorial you will need to have node and npm installed in your machine, if you don't have node installed. you can head up to https://nodejs.dev/ To check if you have node and npm install, open your terminal and type

node -v
npm -v

We are set to go then. still on your terminal, let's create a folder called js-test

mkdir js-test
cd js-test
// open up your code

code .
npm init
//press enter

By running npm init, we have initialized our application which will print a list of basics question regarding your new application. A package.json file will be created, where we can then see all our information about our application

Let's move on, our application is now ready to be worked on. When we open our package.json, check for test object we will see something similar to

"test" : "test"

If we run a test on this using npm test, it will return an error stating no test runner, Here is when Jest comes in;

Jest is a enabled test runner, we can call it an environment where we can test individual units of our components. Jest has the power to recognize which files are up for test. To enable Jest, we need to install Jest with the following command

npm install --save-dev Jest

Install dependency in our applapiication could take time, but I promise you the time is worth it. After install, open your package.json file and replace the property of test with Jest;

"test" :"Jest"

When we run npm test, we will have a test case running.

When we run test, Jest will look for a file with an extension

first.test.js

or any folder with this naming convention

__test__

## Jest Keywords

  • it : This describes the purpose/name of the test you want to carry out. It can also be replaced by test. The "it" keyword is followed by a parenthesis with a string to describe the purpose of test and a callback function. Gotcha: Avoid naming a test case same description
it("my first test case", () =>{
})
test("my second test case", () =>{
})
  • expect : The expect function is used every time you want to test a value, it receives a parameter a program is expected to run. You can check Jest Doc

  • Marcher : This receives what your code is intended to achieve. There are lot of marchers depending on the methods you want to call, examples include - toBe(),toHaveBeenCalled() .toHaveBeenCalledTimes(number), etc

it("my first test case", () =>{
expect(2+3).toBe(5)
})
  • describe: describe is a method that group multiple test into one test case.
describe("group multiple test case", () =>{
it("my first test case", () =>{
expect(2+3).toBe(5)
})
it("my second test case", () =>{
expect(2+3).toBe(5)
})
it("my third test case", () =>{
expect(2+3).toBe(5)
})
}
  • beforeEach: This return the value of the initialState before the next test case is run.
beforeEach(() =>{
console.log("return to initial state before the next test case is run ")
})
it("my first test case", () =>{
expect(2+3).toBe(5)
})
  • afterEach: This cleans out the tested code after each case has been tested
afterEach(() => {
    // this cleans a code after case has been tested
    console.log("after each test");
});
  • beforeAll: The beforeAll method runs before the test cases start running, Whatever expectation you pass in to the beforeAll will be executed before other test case.
beforeAll(() => {
//whatever function or argument we pass here, it must be executed before any other test case

    console.log("before all");
});
  • afterAll: The afterAll method is executed after all test are successfully done. Whatever expectation you pass in to the afterAll will be executed before other test case.
afterAll(() => {
//whatever function or argument we pass here, it must be executed after all other test case are run

    console.log("before all");
});
  • test.only: In Jest, we can specify the test case we want to run, this could be as a result of you having a large code to test and for time issues, you only run one test case, you can easily use the test.only keyword. Gotcha ** The .only keyword can work for both
 test.only("", () =>{
console.log("only this test case is tested)
})
it.only("", () =>{
})
describe.only("", () =>{
})
  • test.skip: With Jest you can as well control files that are needed to be tested or the ones taht you can skip. With the keyword, you can skip whatever test case you want an prevent it from going through test.
test.skip("", () =>{
console.log("this test case will be omitted and will not be tested")
})
it.only("new test case", () =>{
console.log("test will run")
})
describe.only("new test multiple case", () =>{
})

Okay let's us wrap it up here, in this post, I have been able to clear your curiosity of what software testing is as a beginner developer. Look out for my next test case as we dive into more test case and importantly react-testing