Setup using vitest

---

vitest is the most modern and user-friendly testing platform built on top of vite with out-of-box ESM and TypeScript support.

TIP

You can see the described example as a code in the repository here.

Note

This section shows the minimal configuration - for full features and nice defaults, check out the API Reference section or inspect all the options inline using editor's suggestions.

Create a vitest setup file with the following content:

vitest.setup.ts

// 1. Import testing functions
// This is optional - if you prefer globally declared functions for testing,
// the module will pick the necessary functions from the global scope by itself.
import { assert, describe, expect, it } from 'vitest';

// 2. Import the factory that will create functions bound to `vitest`
import { createTestUtils } from '@morev/stylelint-testing-library';

// 3. Import all the rules you want to test - this is usually
// the file that is the default export of your package.
// This step is generally optional - you can do it later,
// but it's recommended, as it reduces the amount of boilerplate code.
import plugins from './index';

// 4. Import types if you need to.
// You can declare global types directly in the same file (below).
import type { CreateTestRule, CreateTestRuleConfig } from '@morev/stylelint-testing-library';

// 5. Create testing functions
// Passing `testFunctions` is optional if you prefer globally declared functions.
// To see all available `createTestUtils` options, please
// refer to the `API Reference` section of this documentation
// or use inline IDE suggestions.
const { createTestRule, createTestRuleConfig } = createTestUtils({
  testFunctions: { assert, describe, expect, it },
  plugins,
});

// 6. Make these functions globally available
// If you don't like to declare test functions globally -
// I guess you know how to design getting these functions as a separate hook :)
globalThis.createTestRule = createTestRule;
globalThis.createTestRuleConfig = createTestRuleConfig;

// 7. Declare a type for globally registered functions
// It's optional, but objectively there's no reason not to do it.
declare global {
  var createTestRule: CreateTestRule;
  var createTestRuleConfig: CreateTestRuleConfig;
}

vitest.setup.ts (without comments)

import { assert, describe, expect, it } from 'vitest';
import { createTestUtils } from '@morev/stylelint-testing-library';
import plugins from './index';
import type { CreateTestRule, CreateTestRuleConfig } from '@morev/stylelint-testing-library';

const { createTestRule, createTestRuleConfig } = createTestUtils({
  testFunctions: { assert, describe, expect, it },
  plugins,
});

globalThis.createTestRule = createTestRule;
globalThis.createTestRuleConfig = createTestRuleConfig;

declare global {
  var createTestRule: CreateTestRule;
  var createTestRuleConfig: CreateTestRuleConfig;
}

index.ts

// All the rules that your plugin provides.
// This file is usually the default export of your package.
import lowercaseSelectorsRule from './rules/lowercase-selectors';

export default [
  lowercaseSelectorsRule,
];

---

Next, specify the path to it in the vitest configuration file as setupFiles option:

vitest.config.ts

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    setupFiles: ['./vitest.setup.ts'], 
  },
});

---

Next, create a script for testing in your package.json:

package.json

{
  "name": "your-awesome-stylelint-plugin",
  "scripts": {
    "test": "vitest"
  },
}

---

We're all set!
Next, follow the instructions on the Usage page.