Vitest Stylelint Utils

Utilities for testing Stylelint plugins.

Currently this package is just a port of jest-preset-stylelint to Vitest.

Unlike jest-preset-stylelint it doesn't add a toHaveMessage custom matcher to expect. If you'd like to have that matcher, copy this code from jest-preset-stylelint and follow these Vitest docs to extend the Vi namespace if you're using TypeScript.

Installation

Install this alongside Stylelint and Vitest

1pnpm install --save-dev vitest-stylelint-utils stylelint vitest
2# or using yarn
3yarn add --dev vitest-stylelint-utils stylelint vitest
4# or using npm
5npm install --save-dev vitest-stylelint-utils stylelint vitest

Setup

There is no required setup.

Optionally you can make it global to avoid rewriting setup boilerplate in multiple test files. There are 2 steps to do this:

1. Create vitest.setup.ts in the root of your project. Provide the required options to getTestRule:

   1import { describe, expect, it } from 'vitest';
   2import { getTestRule, type TestRule } from 'vitest-stylelint-utils';
   3
   4global.testRule = getTestRule({ plugins: ['./'] });
   5
   6declare global {
   7  var testRule: TestRule;
   8}

2. Add vitest.setup.ts to your vitest.config.ts:

   1import { defineConfig } from 'vitest/config';
   2
   3export default defineConfig({
   4  test: {
   5    setupFiles: ['./vitest.setup.ts'],
   6  },
   7});

Usage

getTestRule

1import { messages, ruleName } from '.';
2
3testRule({
4  ruleName,
5  config: [true, { type: 'kebab' }],
6  fix: true,
7
8  accept: [
9    {
10      code: '.class {}',
11      description: 'simple class selector',
12    },
13    {
14      code: '.my-class {}',
15      description: 'simple class selector',
16    },
17  ],
18
19  reject: [
20    {
21      code: '.myClass {}',
22      fixed: '.my-class {}',
23      description: 'camel case class selector',
24      message: messages.expected(),
25      line: 1,
26      column: 1,
27      endLine: 1,
28      endColumn: 8,
29    },
30    {
31      code: '.MyClass,\n.MyOtherClass {}',
32      fixed: '.my-class,\n.my-other-class {}',
33      description: 'two pascal class selectors in a selector list',
34      warnings: [
35        {
36          message: messages.expected(),
37          line: 1,
38          column: 1,
39          endLine: 1,
40          endColumn: 8,
41        },
42        {
43          message: messages.expected(),
44          line: 2,
45          column: 1,
46          endLine: 2,
47          endColumn: 13,
48        },
49      ],
50    },
51  ],
52});