Up and Running with Cypress and Typescript

So things don’t explode randomly when you run your tests…

When I first saw Cypress I was almost immediately in love with it. Cypress allows you to write (not only) integration tests — you know, those tests that control the browser and click around in your browser application to act like a real user. Cypress has a lot of attractive features that should make it way easier to write the integration tests compared to using Protractor and Selenium. I’ll let you check them out by yourself and fool around in the documentation.

Anyway, the only real bummer I’ve encountered when I first started writing the tests is that you can’t use Typescript. I’ve been using Typescript for more than a year now and I’ve gotten used to the type checking and the autocomplete that you don’t get when you use plain Javascript. So when I was writing the first tests using Cypress I had that weird feeling of uncertainty that something might explode when I run them.

Recently I’ve discovered the Cypress typings and I’ve managed to get the tests up and running with Typescript. This short post is about the setup I now use for the tests.

Getting the Typings

Before you can start writing your tests in Typescript you have to install the typings first. Cypress bundles a bunch of tools so if you want to use them, you have to install the typings for them, too.

yarn add @types/{cypress,chai,chai-jquery}

Update: Bundled Typings

☝️ Since Cypress version 1.1.3 the Cypress typings are bundled with the library by default so there’s not need to add @types/cypress separately.

Setting up the Build

Cypress doesn’t support Typescript files yet so we have to set up a simple build system to build the test files and let Cypress execute the resulting Javascript files. You could use a more complex solution like Webpack or Gulp but I have settled down with a very simple solution of just using the Typescript compiler called tsc which is installed when you install Typescript. So go ahead and do that now.

yarn add typescript

Now you can build your test files with a simple command in the console:

tsc --watch --project test/tsconfig.json

The --watch option makes the compiler watch for file changes and it recompiles the test files when you modify them. Here’s how the configuration file looks:

You specify the files to compile using the include options and the output using the compilerOptions.outDir option. Notice that I disabled the source map files and that is because Cypress would also try to run them as tests.

Cypress Configuration

Okay. Now your test files are compiling. The final thing to do is to tell Cypress where to look for them. In order to do that, you need to modify the cypress.json configuration file:

You pass the path to the compiled tests using the integrationFolder option. And there you go!

Wrapping Up

Now you have a working setup for compiling the tests and running them using Cypress. I use NPM scripts to run the whole setup and this is how they look. You just have to install one more dependency.

yarn add npm-run-all

In your CI you would run yarn test and locally you would run yarn test:watch. Everything works like a charm!

Thank you for reading this post. If you like it, make sure to give it a 👏 and follow me for more awesome goodies. Have a nice day!