Using TypeScript
This guide assumes you are using Detox's default test runner integration with Jest. If you have a custom integration, you need to consult your test runner's documentation on how to use TypeScript with it.
It is very common among JavaScript developers to use TypeScript in their projects, so a question arises: how to use Detox with TypeScript? Since Detox by default bases on Jest, the question can be rephrased as: how to use Jest with TypeScript?.
Nevertheless, since many people ask about it, we decided to provide a guide on how to use Detox with TypeScript.
Prerequisites
- A working Detox setup with Jest as your test runner.
- TypeScript installed in your project.
Since React Native 0.71, the default React Native project template comes with TypeScript support out of the box. However, if you have no TypeScript project, now's the time:
- npm
- Yarn
- pnpm
npm install --save-dev typescript
tsc --init
yarn add --dev typescript
tsc --init
pnpm add --save-dev typescript
tsc --init
The latter command will generate a default tsconfig.json
file, so that you can modify it to suit your needs.
If you get an error like:
command not found: tsc
You can try to:
export PATH=$PATH:./node_modules/.bin
if you are usingbash
orzsh
.set PATH=%PATH%;./node_modules/.bin
if you are using Windows Command Prompt.- run
npx tsc --init
instead oftsc --init
. - or any other solution to run an executable from
node_modules/.bin
directory.
Make sure your TypeScript compiles without errors before proceeding:
tsc # or tsc --noEmit if you don't want to generate output files
Setting up Jest with TypeScript
Jest requires a few extra packages to work seamlessly with TypeScript, so let's install them:
- npm
- Yarn
- pnpm
npm install --save-dev ts-jest @types/jest @types/node
yarn add --dev ts-jest @types/jest @types/node
pnpm add --save-dev ts-jest @types/jest @types/node
Your Jest config file at e2e/jest.config.js
(or wherever you keep your Jest configuration) also needs a couple of tweaks:
/** @type {import('@jest/types').Config.InitialOptions} */
module.exports = {
preset: 'ts-jest', // (1)
rootDir: '..',
testMatch: ['<rootDir>/e2e/**/*.test.ts'], // (2)
testTimeout: 120000,
maxWorkers: 1,
globalSetup: 'detox/runners/jest/globalSetup',
globalTeardown: 'detox/runners/jest/globalTeardown',
reporters: ['detox/runners/jest/reporter'],
testEnvironment: 'detox/runners/jest/testEnvironment',
verbose: true,
};
The
preset
option tells Jest to usets-jest
to compile TypeScript files. This is the most important part of the setup.Make sure you update your
testMatch
to include TypeScript files. Otherwise, you are likely to get an error like this:No tests found, exiting with code 1
Run with `--passWithNoTests` to exit with code 0
In /path/to/your/project
60 files checked.
testMatch: /path/to/your/project/e2e/**/*.test.js - 0 matches
testPathIgnorePatterns: /node_modules/ - 60 matches
testRegex: - 0 matches
Pattern: - 0 matches
Writing Detox Tests in TypeScript
With the setup ready, you can now write Detox tests in TypeScript.
Change file extensions from .js
to .ts
where appropriate, and you’re good to go.
import { expect } from 'detox';
describe('Login Screen', () => {
it('should login with correct credentials', async () => {
const email: string = 'test@example.com';
const password: string = 'password123';
await element(by.id('emailInput')).typeText(email);
await element(by.id('passwordInput')).typeText(password);
await element(by.id('loginButton')).tap();
expect(await element(by.id('welcomeMessage'))).toBeVisible();
});
});
Pay attention at the highlighted line above, where we import expect
from Detox. Unfortunately, there is an unresolved clash between Jest's expect
and Detox's expect
when using TypeScript. This will be fixed in the future, but for now, you need to import Detox's expect
explicitly in case you see errors like this:
error TS2339: Property 'toBeVisible' does not exist on type 'JestMatchers<IndexableNativeElement>'.
Conclusion
Using Detox with TypeScript largely boils down to setting up Jest to understand TypeScript. With the power of static typing, your Detox tests can now become more robust, easier to understand, and less error-prone. Happy testing!