Article thumbnail

Creating testing fixtures

4m
frontend
testing
quality

Intro

Did you again have duplicated the test code? If so, you need fixtures! Let's reduce test suites code and improve tests readability.

Prelude

We already know the stubs and the mocks are. There are several other concepts worth exploring.

Let's see what we can use something that has a strange name - fixture.

The role of fixture in testing

Automated testing is also writing code. Sometimes it happens that this code is duplicated. Then what?

You can duplicate the code or prepare something that will save you time and nerves when trying to manage such code - don't repeat yourself rule.

So the role of fixture is to remove duplicate code and encapsulate it inside something we can use elsewhere (tests).

This is precisely the first and, in my opinion, the most important role of fixture. What are the other roles then?

  • Creating and initializing objects or variables
  • Setting up test data
  • Preparing the test environment
  • Cleaning up after the test

We already know what and how so now it's time to play with the real code.

Removing the duplicated test code

Let's assume that we have the EmojiSelect component, in which we want to test several behaviors.

The component is nothing more than a modal and a list of emoticons to use, from which we can choose any of them.

Loading

The tests for this component are as follows:

Loading

We have duplicated our stub object, which hides under the passed props to the components. So let's create our first fixture.

Loading

Now it is time for a change in the tests.

Loading

Well, what about other tests?

Loading

We removed duplicated code and changed the implementation of several tests. Now it's time for conclusions.

Conclusions and thoughts

So what can we see after our changes at first glance?

  • Tests are easier to implement - we focus on checking the result
  • Test code is not duplicated and is more readable
  • Later changes will be simpler - implementation of EmojiPicker initialization is in one place

Now a very important question arises. Should I do things this way everywhere? Of course not!

Use this approach if you see a real profit. Does the test code duplicate? If so do fixture, if not skip it.

In addition, let's pay attention to the fact that fixture is our extra code, and in any code mistakes can happen, so there can be a situation where the tests will work incorrectly not because of a bug in the application, but because of an incorrectly written fixture.

Full example

Link to the full example.

Summary

We have learned another piece of the puzzle called testing. Fixtures can be really useful and make your life easier.

However, remember to use them with caution and for their intended purpose.

If you enjoyed it, be sure to visit us on Linkedin where we regularly upload content from programming.

I create content regularly!

I hope you found my post interesting. If so, maybe you'll take a peek at my LinkedIn, where I publish posts daily.

Comments

Add your honest opinion about this article and help us improve the content.

created: 10-04-2023
updated: 10-05-2023