@jhae/stylelint-rule-tester
v1.4.0
Published
A Stylelint rule tester for Jest.
Downloads
162
Maintainers
Readme
Stylelint Rule Tester
Easily test your Stylelint configuration with Jest.
Installation
Using npm:
npm install --save-dev @jhae/stylelint-rule-tester
Usage
With inline code
Suppose your Stylelint configuration file contains the following rule:
at-rule-disallowed-list:
- debug
- import
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 @debug rule',
// Place the code to be tested against the configuration file here.
code: '@debug "Debug";',
// Define your expectation.
expect: {
// Whether Stylelint should report an error or not.
errored: true,
// The messages that Stylelint should report.
messages: ['Unexpected at-rule "debug"'],
// The severities that Stylelint should report for each message.
severities: ['error'],
},
},
{
name: 'Disallow @import rule',
code: `
@import "test-1.css";
@import "test-2.css";
`,
expect: {
errored: true,
messages: ['Unexpected at-rule "import"', 'Unexpected at-rule "import"'],
severities: ['error', '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 @debug rule (1 ms)
✓ Disallow @import rule (1 ms)
✓ Allow @use rule (1 ms)
With files
You also have the option of passing a file to the test case. This is useful for testing overrides, for example.
Suppose your Stylelint configuration file contains the following content:
rules:
at-rule-disallowed-list:
- import
overrides:
- files:
- '*.css'
- '**/*.css'
rules:
at-rule-disallowed-list: null
Create a CSS file (for example at-rule-disallowed-list.css
) with the following content:
@import 'test.css';
Your test file could then look like this:
import { RuleTest } from '@jhae/stylelint-rule-tester';
RuleTest.describe(
'at-rule-disallowed-list',
{
name: 'Disallow @import rule',
code: '@import "test.css";',
expect: {
errored: true,
messages: ['Unexpected at-rule "import"'],
severities: ['error'],
},
},
{
name: 'Allow @import rule in CSS files',
files: 'at-rule-disallowed-list.css',
},
);
Check out the Standard SCSS Stylelint Config tests for more examples.