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.
- 1. Basics
10 minutes
Software testing
2 m
Grouping the tests
1 minute
The usage of describe and it
2 m
The best practices for naming tests
2 m
Navigating the different types of software tests
3 m
- 2. Mastering unit testing
38 minutes
Project and tests setup
3 m
Unit tests review
4 m
React component testing
5 m
Snapshot testing in React
4 m
Understanding stubs in testing
3 m
Understanding mocks in testing
5 m
Creating testing fixtures
4 m
Using spies in React and Typescript
3 m
Mocking environment variables
3 m
Using dependency injection pattern to improve fixtures
4 m
- 3. Mastering integration testing
12 minutes
Understanding the integration tests
4 m
Using MSW library to remove implementation details from tests
4 m
Creating fixture for MSW to reduce boilerplate and setup
4 m
- 4. Mastering e2e tests
8 minutes
Comments
Add your honest opinion about this article and help us improve the content.