---
title: "Writing Cypress tests in TypeScript using create-react-app v3"
url: "https://www.cypress.io/blog/code-create-react-app-v3-and-its-cypress-tests-using-typescript"
description: "How to write end-to-end tests for a CRA v3 application with TypeScript."
---

# Writing Cypress tests in TypeScript using create-react-app v3

May 13, 2019

By Gleb Bahmutov

Let’s create a new application using [Create React App](https://github.com/facebook/create-react-app?ref=cypress-io.ghost.io) v3 using TypeScript following the [official instructions](https://facebook.github.io/create-react-app/docs/adding-typescript?ref=cypress-io.ghost.io) before adding Cypress end-to-end tests.

## [](#CRA-application "CRA application")CRA application

```shell
$ npm i -g create-react-app
+ create-react-app@3.0.1
$ create-react-app cra-cypress --typescript
...
We suggest that you begin by typing:

  cd cra-cypress
  yarn start

Happy hacking!
```

Let’s check the application

```shell
$ cd cra-cypress
$ yarn start
```

The application opens at `localhost:3000`, notice the `App.tsx` in our project’s `src` directory.

Let’s scaffold Cypress tests. Here is how to do this _extremely quickly_

```shell
$ yarn add -D cypress
info Direct dependencies
├─ cypress@3.2.0
├─ react-dom@16.8.6
└─ react@16.8.6

$ npx @bahmutov/cly init
npx: installed 72 in 7.967s
scaffolding new Cypress project
✅ scaffolded "cypress" folder with a single example spec
you can configure additional options in cypress.json file
see https://on.cypress.io/configuration
```

We just have a Cypress configuration file, `cypress.json`, and a `cypress` folder with tests, fixtures and bundling code (the plugins file).

```text
cypress.json
cypress/
  fixtures/
  integration/
    spec.js
  plugins/
    index.js
  support/
    index.js
```

## [](#Cypress-TS-support "Cypress TS support")Cypress TS support

Great, let’s make sure we can write the test file `cypress/integration/spec.js` in TypeScript instead of JavaScript. To configure Cypress to transpile TS specs, I have written an utility package [@bahmutov/add-typescript-to-cypress](https://github.com/bahmutov/add-typescript-to-cypress?ref=cypress-io.ghost.io). All you need is to install it together with its peer dependency, Webpack:

```shell
$ yarn add -D @bahmutov/add-typescript-to-cypress webpack
info Direct dependencies
├─ @bahmutov/add-typescript-to-cypress@2.0.6
└─ webpack@4.31.0
```

**Note:** you might get this error when you try to start the application after installing the new modules

```shell
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "babel-loader": "8.0.5"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:

  /Users/gleb/git/cra-cypress/node_modules/babel-loader (version: 8.0.6)
```

Just add `SKIP_PREFLIGHT_CHECK=true` to the `.env` file in the root directory of the application and restart the application.

Let’s change `spec.js` to `spec.ts` and write a test to see if it works. Here is our test file:

```ts
describe('CRA', () => {
  it('shows learn link', function () {
    cy.visit('http://localhost:3000')
    cy.get('.App-link').should('be.visible')
      .and('have.text', 'Learn React')
  })
})
```

In a modern text editor like VSCode, you should already see intelligent code completion working, for example showing help for the `.and('have.text', ...)` assertion.

But when we start Cypress with `npx cypress open` it shows an error!

The CRA v3 automatically puts a TypeScript settings file, `tsconfig.json`, in the root directory of the project with several compiler options, including `noEmit: true`.

```json
{
  "compilerOptions": {
    "noEmit": true
  }
}
```

When we installed `add-typescript-to-cypress` it placed its own `tsconfig.json` in the `cypress` folder that extends the root `tsconfig.json` and includes the Cypress `node_modules` folder (this is what makes VSCode IntelliSense work). We can overwrite any TS options in the `cypress/tsconfig.json` to apply to our test files. For example we need to actually emit the transpiled code for Cypress to work:

```json
{
  "extends": "../tsconfig.json",
  "include": [
    "../node_modules/cypress",
    "*/*.ts"
  ],
  "compilerOptions": {
    "noEmit": false
  }
}
```

Now the test should work (after restarting Cypress).

**You can find the source code in the [bahmutov/cra-cypress](https://github.com/bahmutov/cra-cypress?ref=cypress-io.ghost.io) repository on GitHub.**

## [](#See-also "See also")See also

-   [Cypress TypeScript documentation](https://on.cypress.io/typescript?ref=cypress-io.ghost.io)
-   [Using TypeScript aliases in Cypress tests](https://glebbahmutov.com/blog/using-ts-aliases-in-cypress-tests/?ref=cypress-io.ghost.io)
-   [cypress-react-unit-test](https://github.com/bahmutov/cypress-react-unit-test?ref=cypress-io.ghost.io)