INTRODUCTION TO JAVASCRIPT

TESTING
WHAT IS TESTING?!
testing means checking that our
code meets some expectations.

For example: a function called

"transformer" should returns
the expected output given
some input.
3 Types of Testing
▪ unit testing
▪ integration testing
▪ UI testing
 Jest

Jest is a JavaScript test runner, that is, a JavaScript

library for creating, running, and structuring tests.
 Setup Testing Directory

mkdir getting-started-with-jest && cd $_

npm init -y
 Install Jest

npm i jest --save-dev

 Setup Test Script

"scripts": {
"test": "jest"
},
 Navigate to the directory and create test
folder

cd getting-started-with-jest
mkdir __tests__
 Creating Test
describe("Filter function", () => {
test("it should filter by a search term (link)", () => {
const input = [
{ id: 1, url: "https://www.url1.dev" },
{ id: 2, url: "https://www.url2.dev" },
{ id: 3, url: "https://www.link3.dev" }
];

const output = [{ id: 3, url: "https://www.link3.dev" }];

expect(filterByTerm(input, "link")).toEqual(output);

});
});
 describe

describe, a Jest method for containing one or more related tests. Every
time you start writing a new suite of tests for a functionality wrap it in
a describe block.
 Creating Test
describe("Filter function", () => {
test("it should filter by a search term (link)", () => {
const input = [
{ id: 1, url: "https://www.url1.dev" },
{ id: 2, url: "https://www.url2.dev" },
{ id: 3, url: "https://www.link3.dev" }
];

const output = [{ id: 3, url: "https://www.link3.dev" }];

expect(filterByTerm(input, "link")).toEqual(output);

});
});
 test

test is the actual test block

 Creating Test
describe("Filter function", () => {
test("it should filter by a search term (link)", () => {
const input = [
{ id: 1, url: "https://www.url1.dev" },
{ id: 2, url: "https://www.url2.dev" },
{ id: 3, url: "https://www.link3.dev" }
];

const output = [{ id: 3, url: "https://www.link3.dev" }];

expect(filterByTerm(input, "link")).toEqual(output);

});
});
 expect

In a Jest test you should wrap the function call inside expect which
coupled with a matcher (a Jest function for checking the output)
makes the actual tests.
 Creating Test
describe("Filter function", () => {
test("it should filter by a search term (link)", () => {
const input = [
{ id: 1, url: "https://www.url1.dev" },
{ id: 2, url: "https://www.url2.dev" },
{ id: 3, url: "https://www.link3.dev" }
];

const output = [{ id: 3, url: "https://www.link3.dev" }];

expect(filterByTerm(input, "link")).toEqual(output);

});
});
 Run

npm test
FAILED!!!
 Fixing Test

function filterByTerm(inputArr, searchTerm) {

return inputArr.filter(function(arrayElement) {
return arrayElement.url.match(searchTerm);
});
}
 Fixing Test
function filterByTerm(inputArr, searchTerm) {
return inputArr.filter(function(arrayElement) {
return arrayElement.url.match(searchTerm);
});
}

describe("Filter function", () => {

test("it should filter by a search term (link)", () => {
const input = [
{ id: 1, url: "https://www.url1.dev" },
{ id: 2, url: "https://www.url2.dev" },
{ id: 3, url: "https://www.link3.dev" }
];

const output = [{ id: 3, url: "https://www.link3.dev" }];

expect(filterByTerm(input, "link")).toEqual(output);
});
});
Run Again

npm test
PASSED!!!
 Additional Test
describe("Filter function", () => {
test("it should filter by a search term (link)", () => {
const input = [
{ id: 1, url: "https://www.url1.dev" },
{ id: 2, url: "https://www.url2.dev" },
{ id: 3, url: "https://www.link3.dev" }
];

const output = [{ id: 3, url: "https://www.link3.dev" }];

expect(filterByTerm(input, "link")).toEqual(output);

expect(filterByTerm(input, "LINK")).toEqual(output);
});
});

function filterByTerm(inputArr, searchTerm) {

const regex = new RegExp(searchTerm, "i");
return inputArr.filter(function(arrayElement) {
return arrayElement.url.match(regex);
});
}
Reference

https://dev.to/valentinogagliardi/jest-tutorial-for-beginners-getting-started-with-jest-for-javascript-testing-e6c