Testing in SolidJS
Tags: solidjs, cypress, testing, tutorial
Published: 2022-11-17 03:38:58

A team and I built an [NPM package](https://github.com/oslabs-beta/solid-dev-tool) that can be installed into any SolidJS application to help visualize your signals and how they communicate. I wanted to test if the components would render during the development stage. I found [Solid’s testing library](https://github.com/solidjs/solid-testing-library) and proceeded to follow the steps.

After applying each step I realized that I was adding more dev dependencies and config files than I intended. The folder structure seemed convoluted especially because the product was an NPM package and didn’t have the file path of a full-stack application. Each component depended on the other and so I couldn’t evaluate an individual component. Which led to the biggest obstacle, importing and rendering components. I started searching for alternative solutions and I recall using Cypress in a different [project](https://github.com/Jigglypuff-34/my-job-tracker) I worked on.

[Cypress](https://www.cypress.io/) is great for e2e and component testing. There are preconfigured options for other frameworks such as [React, Vue, and Svelte](https://docs.cypress.io/guides/component-testing/overview#Supported-Frameworks), but there aren’t any for SolidJS. I decided to give it a try and it turned out to be a great option. Below are the steps I took in case you wanted to try e2e testing for SolidJS. 

We had a prebuilt application that was stored in our playground folder to load our NPM package. I then installed Cypress as a dev dependency to the NPM package. 

```
npm install cypress --save-dev
```

You should see an empty folder called Cypress in the root of your project folder:

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnlel3gsa7sg8grgz7du.png" width="10"/>

I also added the only script needed to start the project in the package.json file:

```
 "scripts": {
   "test": "cypress open"
 }
```

In another terminal, I ran the prebuilt application in localhost:3000. I then went back to the terminal where I install cypress and ran the test command:

```
npm run test
```

A second window should pop up with the following options:




For this project, I selected E2E testing. 


![Configuration files for E2E](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7o8vthh0t4bvzm822k28.png)

![Image after clicking continue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dt9jxyw864yb1dya8yzg.png)

I then clicked on continue and selected Chrome browser. I then selected Scaffold example specs because it gives great examples of how you can use Cypress and you can later choose what you want to keep:

![Spec that includes example files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yw9hycvx8n772h59pdhj.png)

You should then see the different files along with the option to continue:


![Example files created](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lnrmns1paye5u6xlukj.png)

All these files will be created for you along with a configuration file:


![Folder paths in VS code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/834t20vdet5o7d29xxkd.png)

If you are new to Cypress, you can click on any preloaded test file and it will load it for you on the next screen. 

For this project, I would need to visit localhost:3000 and so I added a configuration to cypress.config.js:

```
const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    supportFile: false
  }
})
```

This will reduce the number of times you type the url when you are testing. You should now be able to write your tests under the cypress folder under e2e. It's a pretty straight forward process and it allowed me to test my project as close as possible to production level. Hope you enjoyed this brief intro to testing your SolidJS application.