Test guideline

All Shoreline components are tested by default and we have three types of tests that we use to ensure the quality of our components and library.

Visual tests

We use Storybook visual testing to write visual tests.

Chromatic is the tool responsible for run the visual regression tests whenever a change is made, by comparing the stable stories with the new ones. Due to the usage limits we need to make a responsible use of this tool, so we take snapshots of our components from a single story containing all possible variations of a component, instead of taking snapshots of every single story. This is also a good practice that helps us keep our Storybook documentation lean and easy to navigate.

What you will test here

• The visual aspect of the component
• The component variations
• The component states

Interactive tests

We use Storybook play functions to write interactive tests.

What you will test here

• The component behavior
• The component interactions

Unit tests

We provide a test utility package that helps us to test your code, which under the hood uses Vitest.

To use it you just need to import from @vtex/shoreline-test-utils, check the example below:

// sum.js
// export function sum(a, b) {
//   return a + b
// }
 
import { expect, test } from '@vtex/shoreline-test-utils'
import { sum } from './sum'
 
test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

What you will test here

• A function behavior
• A lint rule

Since many of our tests are visual and interactive, be sure to read the Storybook guideline before writing tests as it contains important information about how to write stories in Shoreline.