Writing Detox Tests with TypeScript

detox-ts.md

Usage

This guide assumes you've got a project using Detox with Jest, and you want to write your Detox tests in TypeScript.

• Refer to this guide if you need to set up such a project.

1. Add TypeScript + ts-jest to package.json

We'll be using ts-jest to run Jest tests with TypeScript.

npm install --save-dev typescript ts-jest

2. Configure Jest to use ts-jest

Modify your Jest configuration (e2e/config.json by default) to include the following properties

{
  "preset": "ts-jest",
  "testEnvironment": "node",
  "setupTestFrameworkScriptFile": "./init.ts"
}

NB: this is mostly the same output of running ts-jest config:init, with setupTestFrameworkScriptFile being the only added property.

3. .js -> .ts

Convert all files in the e2e directory ending in .js to .ts

4. Add typings for Detox, Jest, and Jasmine

Add typings for Detox, Jest, and Jasmine (the latter two are used in init.ts), as well as for other modules that you use in your Detox tests.

npm install --save-dev @types/detox @types/jest @types/jasmine

5. Writing tests

It's recommended that you import the Detox methods instead of their globally defined counterparts, to avoid a typing issue between Detox and Jest. This can be enforced by calling detox.init with { initGlobals: false }

Your init.ts would look simliar to this:

import { cleanup, init } from 'detox';
import * as adapter from 'detox/runners/jest/adapter';

const config = require('../package.json').detox;

jest.setTimeout(120000);
jasmine.getEnv().addReporter(adapter);

beforeAll(async () => {
    await init(config, { initGlobals: false });
});

beforeEach(async () => {
    await adapter.beforeEach();
});

afterAll(async () => {
    await adapter.afterAll();
    await cleanup();
});

Note: the global constants are still defined in the typings, so using the globals will not result in a tsc error.

Your tests would then import the Detox methods from the detox module like so:

import { by, device, expect, element, waitFor } from 'detox';

Note: @types/detox is maintained by the community and not by Wix.

You should now be able to run your Detox tests, written in TypeScript!

If you end up here from search engines, be advised that Detox 20.9.0 seems to support TypeScript out-of-the-box. I set it up in 2023-05 for a react native project following the official instructions, and the only additional changes I had to do were:

1. Scan for TypeScript files in your jest config: testMatch: ['<rootDir>/e2e/**/*.test.ts'], (instead of .js)
2. Import the Detox version of expect, so your IDE/editor doesn't think it's the one from jest or jasmine: import { expect } from 'detox';

I didn't have to install any other dependencies and didn't need a init.ts. No further changes to the jest config besides scanning for .ts files.

@timotgl i tried your solution but it doesn't recognize me it etc... do i need to add a tsconfig?

@Rossella-Mascia-Neosyn I used WebStorm, not familiar with VSCode, sorry. Recognizing it, describe etc. as globals properly with TS is a different issue, there should be stackoverflow answers for that.

@timotgl i solved it like this:

1. yarn add -D @types/jest
2. add in tsconfig jest

adapter is depreceted