sass-jest
is a Sass preproccessor for Jest that lets you test projects with Sass. The API used matches the excellent sass-true library.
To use this in your project, run:
npm install --save-dev sass-jest
If you don't already have jest installed,
npm install --save-dev jest sass-jest
Modify your project's package.json
so that the test and jest section looks something like:
{
"scripts": {
"test": "jest"
},
"jest": {
"moduleFileExtensions": [
"js",
"scss"
],
"transform": {
"^.+\\.scss$": "sass-jest"
},
"testRegex": "__tests__/.*\\.(js|scss)$"
}
}
Import the mixins to your test file, like any other Sass file:
@import "sass-jest";
sass-jest follows Jest's structure for writing tests by using describe/it
.
@include describe('Zip [function]') {
@include it('Zips multiple lists into a single multi-dimensional list') {
// Assert the expected results
@include assert-equal(
zip(a b c, 1 2 3),
(a 1, b 2, c 3)
);
@include assert-true(true);
@include assert-false(false);
}
}
Using @error
will cause the Sass compiler to bail out with the given message, to get around this sass-jest
converts all @error
calls to a return statement and handles catching the error message for you.
@function throws-error() {
@error "Thrown error"
}
@include describe ('Error') {
@include it ('Captures the error and asserts its value') {
// Make sure you call the code that will throw the error within the "it" mixin
$dummy: throws-error();
@include assert-error-raised ("Thrown error");
}
}
Note: As @error
is converted to a return, functions that call functions that raise errors will have different behavior.
One can use the assert
mixin to compare the compiled CSS that your code produces.
@include describe('css comparisons') {
@include it('compares two blocks of css') {
@include assert {
@include output {
@include font-size('large');
}
@include expect {
font-size: 2rem;
line-height: 3rem;
}
}
}
}
If you do not have any tests that require jsdom
then you can set Jest's test environment to node
instead as this will reduce the startup time for your tests to run.
{
"jest": {
"testEnvironment": "node"
}
}
@error
converting