Easily Test Mixins With Jest

So recently I decided to add tests to one of my repos. Since I am new to JS to some extent, I started looking for what the best ways were to add tests to a frontend project. Well, as it turns out there are many libraries (duhh, it's JS afterall). However, there are various types of testing as well like Unit Testing or Component Testing.

This post is not about those tests though. After looking a bit for the best library to use with VueJS, I decided on using jest. I am not an expert but it doesn't take an expert to know that Jest was built for ReactJS. Well, for starter, Jest is built by Facebook and has a great integration with React. js. So yeah, Jest might not be the first choice of Vue users.

I loved the fact that it was so easy to setup and as I started writing tests I understood that it's actually very easy to use as well. So all in all, I ended up using Jest as the testing framework for my project.

Testing Mixins

After I had written tests for most of my components, I finally decided to write tests for my mixins. This is when I came to a stop. I started looking at the docs in order to know what the best way to test mixins would be. However, there wasn't much documentation regarding that.

This is when I realized something.

What are mixins?

A mixin is a class containing methods that can be used by other classes without a need to inherit from it

As stated on Wikipedia, a mixin is a class containing methods that can be used by other classes without a need to inherit from it.

In case you are not familiar to mixins (why are you even reading this article about writing tests for mixins then?), mixins are functions that developers can inherit in some other code and use them.

This also means that mixins cannot be used independently. What I mean is, let's say you have a mixin defined in VueJS. Now you want to use this mixin. You can easily import it and use. However, in your source code is there any use of the mixin without it getting imported? No.

Mock Component

We will create a mock component, a bare bones component basically, to inherit the mixin to that and test it.

Now that our doubt about mixins is out of the way. It is clear, we will need a component that can import the Mixin in order to test it. So what should we do?

We can just make a simple Mock Component. In my case, I went with a simple Mock Component written in Vue in the following way:

<template>
  <div class="test"></div>
</template>

<script>
/**
 * Return a component to be used as dummy in order
 * to mock things like mixins.
 */
export default {
  name: "MockComponent"
};
</script>

Once we have a component, we can easily use it to use our mixins and use it accordingly.

Using mock component with Mixin

Let's say we have a mixin with a function getBoolFromValue(), we can easily write a jest test for that now:

describe("Test mixin function", () => {
  const wrapper = shallowMount(MockComponent, {
    mixins: [mixinName]
  });

  it("should return proper value from bool", () => {
    expect(getBoolFromValue("on")).toBeTruthy();
  })
})

Why not use a component from the code?

Well, using a component already defined in the code would work too. However, why add all the bulk while testing a mixin. We want the mixin to be tested as easily as possible. As well, adding a component might add some bulky imports etc, so it is way easier to just keep a MockComponent that is just basically an empty template to test Mixins.

You can check the tests on my repo as well

This post was initally posted on my personal blog

Comments

[Artur Neumann]

thank you for the idea. It did not quite work for me exactly the way you have described it, but it game me the clue.
here is what I'm doing

      const Component = {
        render() {}
      }
      const wrapper = shallowMount(Component, {
        mixins: [mixinName]
      })
      expect(wrapper.vm.mixinFunc(inputValue)).toEqual(expectedResult)