Configuring Jest with TypeScript: A guide to setting up and running tests across multiple files

Question

Configuring Jest with TypeScript: A guide to setting up and running tests across multiple files

Currently, I am diving into the world of TDD and attempting to create a basic test suite for my Node Express API.

My project directory has the following structure:

.
└── root/
    ├── src/
    │   ├── services/
    │   │   └── MyService.ts
    │   └── Server.ts
    └── tests/
        ├── services/
        │   └── MyService.spec.ts
        └── SetupTests.spec.ts

My goal is to have JEST execute the "SetupTests.spec.ts" first, followed by the "MyService.spec.ts" tests. In my "SetupTests.spec.ts" file, I have the following code:

import Server from '../src/Server'
import axios, { AxiosInstance } from 'axios'

let testAxios: AxiosInstance = axios.create({ baseURL: 'http://localhost:3000' })
let testServer: Server = new Server()

beforeAll(() => {  
  return testServer.bootstrap() //It returns the 'app.listen()' object
})

afterAll(() => {
  return testServer.shutdown()
})

//I'm wondering if it's possible to include other *.spec.ts test files here - is it possible?

However, when I run "npx jest", it attempts to execute "MyService.spec.ts" before "SetupTests.spec.ts", leading to failures since the Server is not listening yet.

What steps can I take to resolve this issue?

Alternatively, should I include the "beforeAll" and "afterAll" calls in every *.spec.ts file? Is this considered a best practice?

Thank you for your assistance!

typescript express jestjs ts-jest

Answer 1

Answer №1

I successfully achieved my goal by following these steps:

I divided the setup into two separate files with the extensions "**.setup.ts" (without ".spec.ts" or ".test.ts") each containing specific content:

Content of "env.setup.ts" file:

import dotenv from 'dotenv'
console.log("=========== ENV SETUP LOADING ===========")
dotenv.config()
console.log("=========== ENV SETUP LOADED! ===========")

Content of "server.setup.ts" file:

import Server from '../common/Server'

const server = new Server()

beforeAll(() => {
  console.log("=========== TEST SERVER STARTING ===========")
  server.bootstrap()
  console.log("=========== TEST SERVER STARTED! ===========")
})

afterAll(() => {
  console.log("=========== TEST SERVER STOPPING! ===========")
  server.shutdown()
  console.log("=========== TEST SERVER STOPPED ===========")
})

I also utilized the "jest.config.ts" file to reference the setup files:

import type { JestConfigWithTsJest } from 'ts-jest'

const jestConfig: JestConfigWithTsJest = {
  preset: 'ts-jest',
  setupFiles: [
    "./tests/env.setup.ts"
  ],
  setupFilesAfterEnv: [
    "./tests/server.setup.ts"
  ]
}

export default jestConfig

To create a test suite for a specific file, I generated a file named "MyServiceClass.test.ts" with the following logic:

import axios, { AxiosError, AxiosResponse } from "axios"

describe("Test my simple api", () => {
  const testAxios = axios.create({ baseURL: 'http://localhost:3000' })
  test("my test 1", () => {
    // return axios. [...]
  })

  test("my test 2", () => {
    // return axios. [...]
  })
}

By implementing this setup, everything is now functioning as intended!

I raised this query as I could not find a suitable structure for this initial setup, rather than having everything in one file.

Answer 2

I successfully achieved my goal by following these steps:

I divided the setup into two separate files with the extensions "**.setup.ts" (without ".spec.ts" or ".test.ts") each containing specific content:

Content of "env.setup.ts" file:

import dotenv from 'dotenv'
console.log("=========== ENV SETUP LOADING ===========")
dotenv.config()
console.log("=========== ENV SETUP LOADED! ===========")

Content of "server.setup.ts" file:

import Server from '../common/Server'

const server = new Server()

beforeAll(() => {
  console.log("=========== TEST SERVER STARTING ===========")
  server.bootstrap()
  console.log("=========== TEST SERVER STARTED! ===========")
})

afterAll(() => {
  console.log("=========== TEST SERVER STOPPING! ===========")
  server.shutdown()
  console.log("=========== TEST SERVER STOPPED ===========")
})

I also utilized the "jest.config.ts" file to reference the setup files:

import type { JestConfigWithTsJest } from 'ts-jest'

const jestConfig: JestConfigWithTsJest = {
  preset: 'ts-jest',
  setupFiles: [
    "./tests/env.setup.ts"
  ],
  setupFilesAfterEnv: [
    "./tests/server.setup.ts"
  ]
}

export default jestConfig

To create a test suite for a specific file, I generated a file named "MyServiceClass.test.ts" with the following logic:

import axios, { AxiosError, AxiosResponse } from "axios"

describe("Test my simple api", () => {
  const testAxios = axios.create({ baseURL: 'http://localhost:3000' })
  test("my test 1", () => {
    // return axios. [...]
  })

  test("my test 2", () => {
    // return axios. [...]
  })
}

By implementing this setup, everything is now functioning as intended!

I raised this query as I could not find a suitable structure for this initial setup, rather than having everything in one file.

Configuring Jest with TypeScript: A guide to setting up and running tests across multiple files

Answer №1

Similar questions

Angular's ngRoute is causing a redirect to a malformed URL

ensuring case sensitivity in URLs using node.js with express

Converting less files to css using expressjs 4.x

Encountered a 404 Error when attempting to store data in mongoDb using node.js and express

Using NodeJS to perform asynchronous tasks with setImmediate while also incorporating private class

Ways to modify the access control to permit origin on a specific API URL in React

Display a semantic-ui-react popup in React utilizing Typescript, without the need for a button or anchor tag to trigger it

The error message "result.subscribe is not a function" indicates that there was a problem

When using Express.js for file uploading, it is important to first verify that a file has been sent, set a maximum file size limit, and ensure

Typescript implementation for a website featuring a single overarching file alongside separate files for each individual webpage

Apply a border to the div that has been selected

In TypeScript, it can be challenging to determine the equality between a value and an enum

NodeJS MySQL failing to retrieve the most updated data post-write

Iterating through an array of MongoDB document IDs, querying each ID and then storing the results in a new array results in an empty array

The type '{ children: Element[]; }' does not include the properties 'location' and 'navigator' that are present in the 'RouterProps' type

Angular: Unable to locate route declaration in the specified path /src/app/app-routing.module.ts

Step-by-step guide on using nodemon on a web hosting server

Establishing a Link to Mongodb-Native-Driver within an express.js Application

When working with Typescript, NextAuth throws errors while embedding

How can we improve our handling of cyclic requires and EventEmitter in our code?