How To Setup Cypress + @testing-library/cypress with Typescript
Introduction
Imagine manually testing a large codebase like Facebook by meta, the amount of time and effort that will be required to successfully run through every single component will probably take forever and some components won’t even get tested. The best solution is to automate testing in the project to save time and catch bugs early, there are different testing tools out there but will focus on configuring cypress and @testing-library/cypress.
Cypress is a testing tool that allows developers to run end-to-end(e2e) tests and other forms of testing such as unit and integration tests. To learn more about cypress click here.
@testing-library/cypress allows developers to write tests in cypress just like you would in @testing-library/react making the tests simple to read and understand.
By the end of this article, you will learn how to set up and test with cypress and @testing-library/cypress.
Prerequisites
This simple project will teach us how to set up cypress and run tests, you don’t need to be an expert but knowledge in the following will definitely help in understanding.
- React
- Typescript
- Javascript
Create typescript project
You can call the project whatever name you like.
yarn create-react-app cypress-test — template typescriptInstall packages
After creating the project we are going to install cypress, @testing-library/cypress, and eslint-plugin-cypress(sets globals for writing tests in cypress) as dev dependencies.
yarn add cypress @testing-library/cypress eslint-plugin-cypress --devConfigure package.json
When your installation is a success, you need to open your package.json and add scripts to open and run cypress, add the following line of code below to the script.
“cypress”: “cypress open”,Run Cypress
Start your project by running yarn start and then open cypress by running yarn cypress in the terminal. When cypress successfully runs, the window below will pop up and you can select the type of test you want to run, we will select E2E Testing.
After clicking on E2E, you will notice that a folder called cypress containing configuration files and a file for called cypress.config.ts will automatically be added to your project.
choose the browser that you are comfortable with to run the tests, in my case I will choose chrome
Once cypress is running in the browser, you will see the window
We are going to click on create new empty spec but if you want to check out some examples then you can click on the other option. After you create the file, a folder called e2e will be added automatically. Once you have created a spec, click on it to run your first test! congrats for making it this far.
Config @testing-library/cypress
it's tough trying to work the default selectors from cypress. To make testing smooth, we use the customized components that the library provides. Navigate to e2e.ts in the support directory import @testing-library/cypress and add commands.
import '@testing-library/cypress/add-commands'And now navigate to the command.ts in the support directory and add the types reference to @testing-library/cypress
/// <reference types="@testing-library/cypress" />We are now good to use @testing-library/cypress which will allow you to write tests with commands such as findByText etc.
Add tsconfig
Since this is a typescript project, a tsconfig file is needed in the cypress folder, the contents of the config file are subject to different config styles
For those that use linting, you can add .eslint.js file to the cypress folder to avoid conflicts if multiple testing tools are been used in the same project.
Combine Commands
To run cypress and yarn start with one command in the terminal, install start-server-and-test as a devDependence
yarn add -D start-server-and-testadd the following to the scripts in package.json and you are good to go
"cypress": "cypress open","test:e2e": "\"test:e2e:run\" \"test:e2e:start\"","test:e2e:run": "start-server-and-test start http://localhost:3000 cypress",
Run yarn test:e2e:run in the terminal and it will start the project and open cypress for you.
Run your first basic test
We are going to create a simple signup form using material UI and test it, bare in mind that most components from these packages have already been tested by the creators.
Below is the spec file, I use the findByTestId command provided by @testing/cypress which in my opinion makes it easier to read but you use any that you feel comfortable with. Type in the form inputs, select items from the radio button group, and dropdown. Chain assertions at the end of every command to make sure the component is visible to the user.
Hope this helped you configure your cypress and @testing-library/cypress with typescript, kindly check the git repo for this article for reference, Thanks for taking the time to read through my writing.
