Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
@chromaui/addon-visual-tests
Advanced tools
The Visual Testing addon enables you to run visual tests on your stories and compare changes with the latest baselines across multiple viewports and browsers to catch UI regressions early in development without leaving Storybook.
Run the following command to install the addon and automatically configure it for your project via Storybook's CLI:
npx storybook@latest add @chromaui/addon-visual-tests
Start Storybook and navigate to the Visual Tests panel to run your first visual test with Chromatic!
By default, the addon offers zero-config support to run visual tests with Storybook and Chromatic. However, you can extend your Storybook configuration file (i.e., .storybook/main.js|ts
) and provide additional options to control how tests are run. Listed below are the available options and examples of how to use them.
Option | Description |
---|---|
buildScriptName | Optional. Defines the custom Storybook build script options: { buildScriptName: 'deploy-storybook' } |
debug | Optional. Output verbose debugging information to the console. options: { debug: true } |
projectId | Automatically configured. Sets the value for the project identifier options: { projectId: Project:64cbcde96f99841e8b007d75 } |
zip | Recommended for large projects. Configures the addon to deploy your Storybook to Chromatic as a zip file. options: { zip: true } |
// .storybook/main.ts
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from "@storybook/your-framework";
const config: StorybookConfig = {
framework: "@storybook/your-framework",
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
// Other Storybook addons
"@chromaui/addon-visual-tests",
{
name: "@chromaui/addon-visual-tests",
options: {
projectId: "Project:64cbcde96f99841e8b007d75",
buildScriptName: "build-storybook",
zip: true,
debug: true,
},
},
],
};
export default config;
The addon uses the Chromatic public GraphQL API. We rely on its schema to generate type definitions. The schema needs to be manually updated whenever it changes.
To update, take https://github.com/chromaui/chromatic/blob/main/lib/schema/public-schema.graphql and save it under src/gql/public-schema.graphql
.
When installed, running Storybook may lead to the following error:
const stringWidth = require('string-width');
Error [ERR_REQUIRE_ESM]: require() of ES Module /my-project/node_modules/string-width/index.js is not supported.
This is a known issue when using an older version of the Yarn package manager (e.g., version 1.x). To solve this issue, you can upgrade to the latest stable version. However, if you cannot upgrade, adjust your package.json
file and provide a resolution field to enable the Yarn package manager to install the correct dependencies. In doing so, you may be required to delete your node_modules
directory and yarn.lock
file before installing the dependencies again.
"resolutions": {
"jackspeak": "2.1.1"
}
Alternatively, you could use a different package manager (npm, pnpm).
We welcome contributions to the Storybook Addon Visual Tests! If you're a maintainer, refer to the following instructions to set up your development environment with Chromatic.
FAQs
Visual Testing addon with Chromatic
The npm package @chromaui/addon-visual-tests receives a total of 7,361 weekly downloads. As such, @chromaui/addon-visual-tests popularity was classified as popular.
We found that @chromaui/addon-visual-tests demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.