In my , I discussed why Sass unit testing is a thing and why you may want to incorporate it into your project. If you were shocked to find out that this is something that is done, please let me explain in my first post. previous post Unit testing Sass functions wasn’t too complicated. But what about mixins? Testing-wise, it is quite similar. The only difference here is the syntax. Getting Started Note that the steps outlined here assume you have set up your test project similar to how it is described in the first post. If you have an existing project, you can follow along and delete the test artifacts later. For this tutorial, let’s create a simple viewport mixin similar to the mixin defined in . The mixin below will apply any styles passed into it if it is larger than the specified breakpoints. Copy the contents below into a new file within . screen-above() Cirrus /src/mixins.scss // mixins.scss

$breakpoints: (
    $xs: 640px,
    $sm: 768px,
    $md: 1024px,
    $lg: 1280px,
    $xl: 1536px,
);

// Applies styles for viewports greater than a certain breakpoint. An error is thrown if the breakpoint does not exist.
@mixin screen-above($breakpoint) {
    @if not map-has-key($map: $breakpoints, $key: $breakpoint) {
        @error 'The given breakpoint #{$breakpoint} for @screen-above does not exist.';
    }

    @media screen and (min-width: map-get($breakpoints, $breakpoint)) {
        @content;
    }
} Testing Before you write the test, make sure you have already done the prerequisites required to run Sass unit tests in the first place. You can read all about it in my first post . here Let’s start by creating our test file for mixins in . test/mixins.spec.scss @import 'true';
@import '../src/mixins.scss'; Let’s add our test block with the annotation. @describe @include describe('screen-above()') {
    
} Next, we will add our test case. @include describe('screen-above()') {
    @include it('should return screen-above 640px given $xs') {
        
    }
} Then, we will use the mixin to take the actual and the value we . Below we place the class in the output that includes the mixin. The would contain the CSS output we expect. assert() output expect .test screen-above expect @include it('should return screen-above 640px given $xs') {
    @include assert {
        @include output {
            .test {
                @include screen-above($xs) {
                    color: #fff;
                }
            }
        }
        @include expect {
            @media screen and (min-width: 640px) {
                .test {
                    color: #fff;
                }
            }
        }
    }
} To summarize this better: - describes the expected results. expect - the actual output from the mixin you are testing. output - a clause that binds the and mixins together for the test. assert output expect Running Your Tests Like in the previous blog post, you can now run to execute Jest for us. To be honest, it’s probably faster to just type instead. npm test jest npm test You should see the results of your first test similar to the output below: PASS  tests/scss.spec.js
  Sass
    screen-above()
      √ should return screen-above 640px given $xs (1 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.143 s, estimated 4 s
Ran all test suites. Conclusion Well, that wraps up the tutorial on how to unit test mixins in Sass. In the next post, I will discuss how we can add error handling within our Sass that can be caught and tested using True. Thanks for reading! 💎 Thank you for taking the time to check out this post. For more content like this, head over to my actual . Feel free to reach out to me on and follow me on . blog LinkedIn Github Also Published Here

Mind

The Browser in the Browser (BITB) Attack: Lies, Deceit, and CSS

Unit Testing Sass: Functions 🧪

2021 - HackerNoon Contributor of the Year - WEBDEV

2021 - HackerNoon Contributor of the Year - ANGULAR

Nominated for 2022 - HackerNoon Contributor of the Year - Phishing

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Nominated for 2022 - HackerNoon Contributor of the Year - Monitoring

Nominated for 2022 - HackerNoon Contributor of the Year - Testing

Too Long; Didn't Read

Why I Unit Test My Sass: Mixins 🧪

Why I Unit Test My Sass: Mixins 🧪

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Boosting Your Productivity and My Scrappy Approach to Getting Things Done 🚀

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Boosting Your Productivity and My Scrappy Approach to Getting Things Done 🚀

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps