vite-plugin-test-selectors

Simple vite plugin for stripping test selectors in production builds

Supported frameworks

• React
• Vue
• Svelte

Installation

Warning: This plugin is still in development!

Install using yarn or npm:

yarn add vite-plugin-test-selectors -D

Usage

Add to your vite config:

import { defineConfig } from 'vite';
import StripTestSelectors from 'vite-plugin-test-selectors';

export default defineConfig({
  plugins: [
    StripTestSelectors()
  ]
});

Then, customize any of the following options:

StripTestSelectors({
  dev: false,
  selectors: ['data-test'],
  suffixes: ['.jsx', '.tsx', '.vue', '.svelte'],
})

'Dev' is a boolean that determines whether to apply the plugin on serve or build. It defaults to 'false', only stripping test attributes in production builds.

The provided selectors are optional (defaulting to only 'data-test'), and are parsed as selector-*, where * is any string optionally followed by a value assignment. For example:

<!-- Will not be stripped -->
<Component class="someClass" data-test />
<!-- Will be stripped -->
<Component class="someClass" data-test-component data-test-id="someId" />

Suffixes are also optional, and are an array of any valid file extensions. They default to '.jsx', '.tsx', '.vue', and '.svelte'.

For example usage, check out the included demos.

Testing

yarn test

Credits

Authors: kiosion