Skip to main content

Jest

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

superplate serving optional Jest testing plugin which uses ts-jest under the hood and comes with nock and isomorphic-unfetch.

Implementation#

You can see how superplate's Jest plugin is implemented below.

jest.config.js#

We need to configure Jest to work with our environment. We'll be doing this in test/jest.config.js with the following code;

test/jest.config.js
const { pathsToModuleNameMapper } = require("ts-jest/utils");const { compilerOptions } = require("../tsconfig.json");
const paths = compilerOptions.paths ? compilerOptions.paths : {};
module.exports = {    rootDir: "../",    setupFilesAfterEnv: ["<rootDir>/test/jest.setup.js"],    testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/"],    moduleNameMapper: {        ...pathsToModuleNameMapper(paths, { prefix: "<rootDir>/" }),        "\\.(scss|sass|css)$": "identity-obj-proxy",    },};

What we basically do is;

  • Specifying a root directory for tests
  • Path to our Setup configuration for the testing environment
  • Mapping our tsconfig paths to jest
  • Mocking styles to prevent Jest to throw an error

jest.setup.js#

We need to apply the polyfill for the fetch, set environment variables to use in tests and setup nock to prevent memory leaks. We'll place this setup in test/jest.setup.js with the following code;

test/jest.setup.js
import "isomorphic-unfetch";import nock from "nock";import dotenv from "dotenv";
dotenv.config({ path: ".env.test" });
afterAll(() => {    nock.cleanAll();    nock.restore();});

Running Tests#

We need to specify our config file when running jest, we can do this with jest -c test/jest.config.js. We will add this command to package.json as a test script.

package.json
{    "scripts": {        "test": "jest -c test/jest.config.js"    },}

Example Test#

add.ts
// This is an example function to testexport const const add = (...nums: number[]) => {  return nums.reduce((acc, curr) =>  acc + curr, 0);}
add.spec.ts
import { add } from "./add";
describe("Add Function", () => {  it("1 + 2 + 3 = 6", () => {    expect(add(1,2,3)).toEqual(6);  });});

Adding Jest to your project later#

tip

All this work will be handled automatically by superplate, so you don’t need to do anything extra as long as you choose Jest as testing plugin during the project creation phase.

If you want to add Jest to your existing project first install dependencies: 

npm i -D jest ts-jest identity-obj-proxy nock isomorphic-unfetch dotenv

Then you can follow documentations for detail usage