How To Setup Your TypeScript App Test Environment With Jest

Hello 👋 and welcome, I’m undergoing a refinery process with The Startup Intern. During this process, I’ll be provided with study resources and tasks that will help solidify my learning. On successful completion of this process, I’ll be assigned to an organization as a backend developer intern. Kindly check out The Startup Intern on their website or on Twitter to know more about them and what they do. 🤝

In case you are new to automated testing, you might want to check my previous article where I did an introduction to automated testing.

By the end of this article you will be able to:

• setup and configure your test environment.
• run your first test case.

How To Setup Your Test Environment

There are five steps to setting up a test environment for your typeScript application and they are highlighted below:

1. Install the frameworks and dependencies: install Jest, ts-jest, and ts-node as development dependencies with the command below:

npm i --save-dev jest ts-jest ts-node

ts-jest is a dependency that allows you to use jest to test applications written in typeScript while ts-node is a typeScript REPL for node js.

2. Install type definition: after successful installation of frameworks as indicated in the initial npm command, install type definition for Jest with the command below:

npm i --save-dev @types/jest

3. Configure jest: create a jest config file with a typeScript extension in the root directory of your project (as seen in the image below).

jest.config.ts file in the root of a project.

> jest.config.ts
import type { Config } from "@jest/types";
export default async (): Promise<Config.InitialOptions> => {
  return {
    preset: "ts-jest",
     displayName: {
     name: "placeNameOfYourAppHere",
     color: "greenBright",
   },
   verbose: true,
   setupFiles: ["dotenv/config"],
   testMatch: ["**/**/*.test.ts"],
   testEnvironment: "node",
   detectOpenHandles: true,
   collectCoverage: true,
   transform: { "^.+\\.tsx?$": "ts-jest" },
   globalTeardown: "<rootDir>/src/tests/jest-globals-teardown.ts",
   forceExit: true,
 };
};

You can also visit the jest framework documentation to see other ways this can be achieved.
Note that in the jest.config.ts file, there is a globalTeardown property that points to a jest-globals-teardown.ts file inside the /src/tests folder. Jest global teardown is being executed after a test suite execution. This simply means that jest should exit immediately after the execution of a test suite/case.

To create a global teardown, navigate into the /src and create a /tests folder which will house the jest-globals-teardown.ts file (as seen below). Optionally, you can create the /helpers, /integration_tests and /unit_tests folders. These folders will contain helper functions, integration tests, and unit tests respectively.

jest-globals-teardown.ts file in a test folder.

> jest-globals-teardown.ts
export default () => {
 process.exit(0);
};

4. Set test npm commands: the last step is to set the npm test scripts command in the package.json file. These commands placed inside the “scripts” object of the package.json file allow you to execute the test runner of the jest framework.

"scripts": {
  "test": "jest --runInBand",
  "test:watch": "jest --runInBand --watchAll",
}

— runInBand: alias: -i. run all tests serially in the current process, rather than creating a worker pool of child processes that run tests. This can be useful for debugging.

5. Configure your node environment: Set your node environment to test as seen below:

> .env 
NODE_ENV='test'

To run and exit the jest test runner immediately, use the command:

npm run test

To run and keep tracking the test for changes without the exit of the test runner, use the command:

npm run test:watch

Your First Test Case

So far, we have covered the steps to setting up your test environment. To create our first test, navigate into /src/tests/unit_tests and then create a test.test.ts file that contains a simple test case like so:

test("My first test", () => {
  const res = 1;
  expect(res).toBe(1);
});

Then execute the test runner with the npm command:

npm run test

All things being equal, the jest test runner will return a pass while reporting the test case run time, number of test suites, and test cases as shown below:

Test runner reporting test case passed.

N.B: The .test after the name of your test file and before the .ts extension is important e.g. (nameOfFile.test.ts). It signals to jest that this is a test file and you should run it as such. Without signifying that this is a test file (with .test), the jest runner will return error; “No tests found, exiting with code 1”.

I hope you find this article helpful. For the next steps, visit this unit testing tutorial by softwaretestinghelp.com and my next article on how to test your rest api with jest and superTest.

👋

Resources

• JEST framework Documentation
• Introduction To Automated Testing
• Jest Tutorial — JavaScript Unit Testing Using Jest Framework.

If this post was helpful, please click the clap 👏 button below a few times to show your support for the author 👇

🚀Developers: Learn and grow by keeping up with what matters, JOIN FAUN.