Using the setupFiles option to set up files and execute code prior to running tests

Question

Using the setupFiles option to set up files and execute code prior to running tests

I need to ensure that some code is executed before all tests are run.

My jest.config.js setup:

  // truncated...
  setupFilesAfterEnv: [
      "./jest.setup.ts"
  ]

The content of jest.setup.ts:

async function setUp() {
  const first = new Promise((res, rej) => {
    res('this called first');
  })
  const second = new Promise((res, rej) => {
    res('this called second');
  })
  first.then((firstRes) => {
    console.log(firstRes)
    second.then(secondRes => console.log(secondRes))
  })
}
beforeAll(done => {
  setUp().then(done => console.log(done));
  done();
})

Upon running the tests, it appears that they are not being executed in order:


 PASS  packages/dao/dao.service.spec.ts (5.532 s)
  Dao Tests
    ✓ should be defined (2 ms)
    ✓ get should return null

  .log
    Running pre-scripts for integration tests...

      at Object.<anonymous> (jest.setup.ts:56:9)

  .log
    this called first

      at jest.setup.ts:86:13

  .log
    undefined

      at jest.setup.ts:91:32

  .log
    this called second

      at jest.setup.ts:87:38

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        5.612 s, estimated 11 s
Ran all test suites.

The output suggests that the tests are being run before the execution of jest.setup.ts.

typescript jestjs

Answer 1

Answer №1

In the world of Jest, there are three main ways to achieve asynchronous behavior: using async functions, raw promises with then, and callbacks with done. It's important to note that these should not be mixed together unless absolutely necessary.

The use of setUp as async serves no purpose as it does not handle nested promises. In the context of beforeAll, done is called synchronously, and any unchained promises could potentially lead to uncaught errors.

A more suitable approach would look like this:

beforeAll(async () => {
  const first = new Promise((resolve, reject) => {
    resolve('this promise resolves first');
  })

  const second = new Promise((resolve, reject) => {
    resolve('this promise resolves second');
  });

  const resultOne = await first;
  console.log(resultOne);
  const resultTwo = await second;
  console.log(resultTwo);
})

Answer 2

In the world of Jest, there are three main ways to achieve asynchronous behavior: using async functions, raw promises with then, and callbacks with done. It's important to note that these should not be mixed together unless absolutely necessary.

The use of setUp as async serves no purpose as it does not handle nested promises. In the context of beforeAll, done is called synchronously, and any unchained promises could potentially lead to uncaught errors.

A more suitable approach would look like this:

beforeAll(async () => {
  const first = new Promise((resolve, reject) => {
    resolve('this promise resolves first');
  })

  const second = new Promise((resolve, reject) => {
    resolve('this promise resolves second');
  });

  const resultOne = await first;
  console.log(resultOne);
  const resultTwo = await second;
  console.log(resultTwo);
})

Using the setupFiles option to set up files and execute code prior to running tests

Answer №1

Similar questions

Using prevState in setState is not allowed by TypeScript

Exploring an Angular Real-World Example Application on Github - Resolving the Following Bug

Despite the presence of a producer and topic, sending Kafka messages is proving to be a challenge

Troubleshooting Problem in Angular 6: Difficulty in presenting data using *ngFor directive (data remains invisible)

Transitioning an NX environment to integrate ESM

Struggling with the @typescript-eslint/no-var-requires error when trying to include @axe-core/react? Here's a step-by

Exploring the retrieval of specific values through bitwise operations in Angular

Enhancing a UMD module definition with TypeScript 2: A step-by-step guide

Exploring the best way to access ViewContainerRef: ViewChild vs Directive

Navigating through Angular to access a component and establishing a data binding

Inheritance from WebElement in WebdriverIO: A Beginner's Guide

Is NATS.io compatible with React Native?

Issue with ambient contexts error in TypeScript constructor

Is there a way to identify which elements are currently within the visible viewport?

utilizing $inject method along with supplementary constructor parameters

Adding a class to a child component layout from a parent component in Angular 12 and Typescript can be achieved by using the ViewChild decorator

Verify if the keys are present within the object and also confirm if they contain a value

This TypeScript error indicates that the variable may be undefined (Error code: 18048)

Angular: Clicking on a component triggers the reinitialization of all instances of that particular component

Learn about Angular8's prototype inheritance when working with the Date object