UI Testing: Unit vs Component test

When it comes to testing your frontend applications; there are many testing methodologies: unit testing, component testing, integration and end-to-end test. This article focuses on unit and component testing as they are commonly used interchangeably or one used in place of the other.

This article assumes that you know how a react application works, and so you know what a component is. In react, it is expected that a component follows the single responsibility principle. A component for signing up should do just that unless in extremely rare cases. A component for signing up should be different from a component for signing in.

In this case, we can say that a component in react is a UNIT of code since it has just one responsibility.

But, when it comes to UI testing, unit testing and component testing are distinct.

Unit Testing

Unit Testing evaluates the structure and logic of code rather than its functionality for the end user. It involves testing individual pieces in isolation from the rest of the code.

To perform unit tests, you would need to create mock-ups of all the resources the function being tested requires.

Unit testing is a vital part of Test Driven Development, (TDD), a software development process that relies on software requirements being converted to test cases before writing code, and tracking all software development by repeatedly testing the software against all test cases.

Unit testing ensures the inputs the function gets are consistent and the output predictable. This approach gives a clear vision of the expected inputs and outputs and ensures only the code needed to pass the tests makes it into the application.

Component Testing

Component testing is usually done after the software has been developed because the test is done on the component in its entirety, and sometimes these components are made up of smaller units of code (which you may have written unit tests for already).

Component testing can be considered a form of end-to-end testing since it aims to test the software from a user's perspective.

Conclusion

Component and unit test are not synonymous, neither are they interchangeable, and it does not have to be one or the other either. As you can see from their explanations, they are distinct test cases.

Practical use-case:

In the case of testing a form component in react, you can choose to test each input field with an input, validation and error state. Testing each input field would be separate from the entire test field and can be considered a unit test, whereas testing the entire form would be a component test.

New to testing react applications? I have a youtube video that gets you started using cypress for your component and end-to-end tests. Watch here.

Happy coding 🍵

Additional Resource:

1. Component vs Unit Test

2. Component vs ui vs integration

3. Testing methods all developers should know

4. Testing in react