Testing in SolidJS

A team and I built an NPM package 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 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 I worked on.

Cypress is great for e2e and component testing. There are preconfigured options for other frameworks such as React, Vue, and Svelte, 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:

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.

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:

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

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

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.