Component Tests

Component testing

Sometimes, we develop complex components that are worth testing in isolation. But it is not recommended to write component tests for every single component in your project. There is one exception: If you write a component library. In that case, we recommend using Storybook and making sure there is 100% test coverage. Besides that, the best practice is to test components that contain some sort of logic. Every other component should be tested as part of the overall end-to-end test suite.

However, some people prefer the traditional testing pyramid and aim for 100% unit test coverage. There is no right or wrong, but you and your team have to decide what’s best.

Set up component tests

Let’s set up component tests for your web application.

Configure Cypress Svelte component tests

First, we need to install two packages to help with Cypress component testing. In the services/web directory, run the following command:

npm i -D @bahmutov/cy-rollup cypress-svelte-unit-test

The first one is a rollup preprocessor needed to deal with .svelte files. The second allows us to run Svelte unit (component) tests.

In addition, we need to upgrade the rollup dependency to the latest version.

npm i -D rollup@latest

Next, it is time to configure the new packages we installed, starting with the preprocessor. Use nano to open the file services/web/cypress/plugins/index.js and change the code so it matches the following:

const rollupPreprocessor = require("@bahmutov/cy-rollup");
  module.exports = (on, config) => {
    on("file:preprocessor", rollupPreprocessor({
      configFile: "cypress/rollup.config.js",
    })
  );
};

Terminal: