Did you again have duplicated the test code? If so, you need fixtures! Let's reduce test suites code and improve tests readability.
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.
The tests for this component are as follows:
We have duplicated our stub object, which hides under the passed props to the components. So let's create our first fixture.
Now it is time for a change in the tests.
Well, what about other tests?
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.
Link to the full example.
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.
- 1. Basics
Grouping the tests
The usage of describe and it
The best practices for naming tests
Navigating the different types of software tests
- 2. Mastering unit testing
Project and tests setup
Unit tests review
React component testing
Snapshot testing in React
Understanding stubs in testing
Understanding mocks in testing
Creating testing fixtures
Using spies in React and Typescript
Mocking environment variables
Using dependency injection pattern to improve fixtures
- 3. Mastering integration testing
Understanding the integration tests
Using MSW library to remove implementation details from tests
Creating fixture for MSW to reduce boilerplate and setup
- 4. Mastering e2e tests