TypeScript Support

TestCafe allows you to write tests with TypeScript - a typed superset of JavaScript. Using TypeScript brings you all the advantages of strongly typed languages: rich coding assistance, painless scalability, check-as-you-type code verification and much more.

TestCafe automatically compiles TypeScript before running tests, so you do not need to compile the TypeScript code.

TestCafe bundles the TypeScript declaration file with the npm package, so you do not need to install it separately.

Writing Tests with TypeScript

To start writing tests with TypeScript, install TestCafe into your project directory. For more information, see Installing TestCafe.

When writing test in TypeScript, it is required to import TestCafe module first.

import { Selector } from 'testcafe';

After importing a testcafe module, an IDE (e.g. VS Code, Sublime Text, WebStorm, etc.) will load TestCafe declaration file and will show you code completion hints for TestCafe API:

Writing Tests with TypeScript

If installed globally, TestCafe will successfully compile and run your tests written in TypeScript. In this case, your IDE will not be able to find the TestCafe declaration file and provide code completion.

Now, you can write tests in the same manner as in JavaScript. When you run a test Testcafe will output if there are any compilation errors.

The extending selectors in TypeScript differs from extending selectors in JavaScript. Refer to the Custom Properties and Custom Methods sections to learn how to extend selectors in TypeScript.

Customize Compiler Options

TestCafe allows you to specify TypeScript compiler options in the tsconfig.json file. You can use these options to enable JSX compilation, import code or typings with paths aliases, set aliases to React typings, or customize other compiler settings.

To apply a custom TypeScript configuration file, specify its location in one of the following ways:

  • the --ts-config-path command line parameter,

    testcafe chrome my-tests --ts-config-path /Users/s.johnson/testcafe/tsconfig.json
    
  • the runner.tsConfigPath API method,

    runner.tsConfigPath('/Users/s.johnson/testcafe/tsconfig.json');
    
  • the tsConfigPath configuration file property.

    {
        "tsConfigPath": "/Users/s.johnson/testcafe/tsconfig.json"
    }
    

In tsconfig.json, define the compilerOptions property and specify the compiler options in this property:

{
    "compilerOptions": {
        "jsx": "react",
        "jsxFactory": "myFactory",
        "paths": {
            "jquery": [ "node_modules/jquery/dist/jquery" ]
        },
        "alwaysStrict": true
    }
}

See the available options in the TypeScript Compiler Options topic.

You cannot override the module and target options.

Save tsconfig.json to the directory from which you run TestCafe (usually the project's root directory), or specify the tsConfigPath option in the configuration file to use a different location.

TestCafe passes the following options to the TypeScript compiler unless you override them in tsconfig.json:

Option Value
allowJs true
emitDecoratorMetadata true
experimentalDecorators true
inlineSourceMap true
noImplicitAny false
pretty true
suppressOutputPathCheck true
skipLibCheck true

TestCafe enables the skipLibCheck option for performance reasons. If you need to check types in your declaration files, set skipLibCheck to false in tsconfig.json.