Stylelint Rule Tester

Easily test your Stylelint configuration with Jest.

Installation

npm install --save-dev @jhae/stylelint-rule-tester

Usage

Suppose your Stylelint configuration file contains the following rule:

at-rule-disallowed-list:
  - import
  - debug

Your test file for the at-rule-disallowed-list rule could look like this:

import { RuleTest } from '@jhae/stylelint-rule-tester';

// By default, the rule tester looks for a `.stylelintrc.yaml` configuration file.
// Call `setConfigFile` to set a different configuration file.
RuleTest.setConfigFile('stylelint.config.js');

// Describe the tests by defining the rule to be tested and the test cases.
RuleTest.describe(
  // First pass the name of the rule.
  'at-rule-disallowed-list',
  // Now describe one or more test cases.
  {
    // Give the test case a name.
    name: 'Disallow @import rule',
    // Place the code to be tested against the configuration file here.
    code: `
      @import "test-1.css";
      @import "test-2.css";
    `,
    // Define your expectation.
    expect: {
      // Whether Stylelint should report an error or not.
      errored: true,
      // The messages that Stylelint should report.
      messages: ['Unexpected at-rule "import"', 'Unexpected at-rule "import"'],
      // The severities that Stylelint should report for each message.
      severities: ['error', 'error'],
    },
  },
  {
    name: 'Disallow @debug rule',
    code: '@debug "Debug";',
    expect: {
      errored: true,
      messages: ['Unexpected at-rule "debug"'],
      severities: ['error'],
    },
  },
  {
    // You can omit the expectation if Stylelint should not report any errors.
    name: 'Allow @use rule',
    code: '@use "test.scss";',
  },
);

Run the tests.
The output would look like this:

Rule 'at-rule-disallowed-list'
  ✓ Disallow @import rule (1 ms)
  ✓ Disallow @debug rule (1 ms)
  ✓ Allow @use rule (1 ms)

Check out the Standard SCSS Stylelint Config tests for more examples.