Skip to content

Latest commit

 

History

History
11 lines (11 loc) · 3.79 KB

File metadata and controls

11 lines (11 loc) · 3.79 KB

14 Unit Testing in React

  • Software testing is a process aimed at identifying errors and verifying the functionality of a product to ensure its quality. Testing also allows developers and testers to assess the system’s behavior under various conditions and to ensure that new changes have not led to regression, meaning they have not disrupted existing functionality.
  • An automated test typically consists of a set of predefined tests and a software product, often referred to as a runner, which launches these tests and analyzes the results to determine the success or failure of each test. In addition to this, automated tests can be used to check performance, stability, security, availability, and compatibility, allowing you to write truly stable, large, and successful projects. That’s why it’s never a good idea to avoid tests; on the contrary, it’s worth getting to know them better and trying to use them in all possible projects.
  • Typically, the following types of tests are distinguished:
    • Unit testing: Testing individual modules or components of the program for correct operation. Unit tests are usually written and executed by developers to check specific functions or methods. Such tests are generally quick to write and can be executed quickly, but they do not test the final application for critical bugs, as the tested and stable components themselves may have problems when interacting with each other. An example of a unit test would be checking the functionality of a single function, React component, or Hook.
    • Integration testing: Testing in which we check the interaction between various modules or system components. The goal is to detect defects in the interfaces and interactions between integrated components. This type of testing is usually conducted on the server side to ensure that all systems work smoothly together and that the business logic meets the specified requirements.
      • For example, an integration test would be one that checks that user registration works by making real calls to REST API endpoints and checking the returned data. Such a test depends less on the application’s implementation and code and more on checking behavior and business logic.
    • End-to-end (E2E) testing: Testing a complete and integrated software system to ensure that it meets specified requirements. E2E testing evaluates the program as a whole. This type of testing is the most reliable, as it completely abstracts from the application’s implementation and checks the final behavior by interacting directly with the application itself. In the process of such testing, for example, in a web application, a real browser is launched in a special environment, in which a script performs real actions with the application like clicking buttons, filling out forms, and navigating through pages.
  • The most popular framework for writing and running unit tests is Jest. However, we will look at its more performant alternative, which is fully compatible with Vite, called Vitest.
  • Testing ReactJS
    • We already know that unit testing involves checking small units, and most often, just functions, which perform some logic and return a result. To understand how testing in ReactJS works, the concept and idea remain the same. We know that at their core, React components are actually createElement functions that return a node, which, as a result of the render function, is displayed on the browser screen as HTML elements. In unit testing, we don’t have a browser, but this is not a problem for us since we know that the render target in React can be almost anything. As you may have already guessed, in the unit tests of ReactJS components, we will be rendering components into a specially created JSDOM format, which is fully identical to the DOM, and the React Testing Library will help us with this.