Chapter 6: Testing Front-End Applications

Testing software is an essential part of software development. We can prevent errors and ensure that new features don't introduce bugs by implementing well-designed tests.

In this chapter, you'll understand software testing by learning how to design integration and end-to-end tests and apply them in the development process. After that, you'll learn how to write tests using Jest, a JavaScript test framework focused on simplicity that works well with React. You'll also learn how to test interfaces by simulating user actions with Puppeteer and Headless Chrome.

In this chapter, we'll cover the following main topics:

• Understanding software testing
• Writing tests with Jest
• Testing interfaces with Puppeteer

By the end of this chapter, you'll have learned how to design integration and end-to-end tests and how to apply them to improve software quality. You'll have learned how to write tests...

Technical requirements

To complete this chapter's exercises, you just need a computer with any OS (I recommend Ubuntu 20.04 or higher) and the software installed in Chapter 1, Environment Setup and Introduction to UmiJS (Visual Studio Code, Node.js, and Yarn).

You can find the complete project in the Chapter06 folder in the GitHub repository available at the following link: https://github.com/PacktPublishing/Enterprise-React-Development-with-UmiJs

Understanding software testing

In this section, we'll discuss software testing and how to design integration and end-to-end tests to ensure your application works as expected.

There are numerous types of software testing, which we can divide into two categories: functional tests, which ensure that functional requirements and specifications are satisfied, and non-functional tests, which focus on testing the behavior and performance of the system. We'll talk about two types of functional tests in this section:

• Integration tests: We write this type of test to ensure that different software components integrate and work correctly to deliver the specified feature.
• End-to-end tests: We write this type of test to cover complete user flows, ensuring that features satisfy user expectations.

It's important to mention that coding the test is only one task of implementing software testing, and it's not worth it if you don't have solid feature specifications...

Writing tests with Jest

In this section, you'll learn how to write tests using the Jest framework in 
JavaScript projects.

Jest is a fast and reliable test framework for JavaScript projects focusing on simplicity. It works with Babel, TypeScript, Node, React, Angular, Vue, and other tools.

After installing it, we can start using Jest without any extra configuration. In our case, we can write a test and run the test command configured in our project without even installing Jest, as Umi already provides Jest with the umi-test package.

Consider this end-to-end test written with Jest to test the login flow:

it('[END_TO_END] Should sucessfully login', async () => {
  const page = await context.newPage();
  await page.goto('http://localhost:8000');
  await page.waitForNavigation();
  await page.type('#username', '[e-mail]');
  await page.type('#password', &apos...

Testing interfaces with Puppeteer

In this section, you'll learn how to write integration and end-to-end tests using Puppeteer and the Headless Chrome browser.

Puppeteer is a Node library to control the Chrome, Chromium, or Firefox browser over the DevTools protocol (or remote protocol for Firefox), which makes it an excellent tool for simulating real scenarios during tests.

When we launch a new browser instance, Puppeteer will default to using Chrome's headless mode. Chrome's headless mode only includes the browser engine, with no user interface. Puppeteer uses the Chrome DevTools protocol to control the browser.

With Puppeteer, we can take screenshots of the page, test responsiveness by simulating numerous mobile devices, such as tablets and smartphones, and more.

You can learn more about Puppeteer on the document page available at https://developers.google.com/web/tools/puppeteer.

We'll write an integration test and an end-to-end test to demonstrate...

Summary

In this chapter, we discussed software testing by learning how to design integration and end-to-end tests. You learned how to use the Jest framework to write tests in React projects. You saw how to use the describe and test (or it) methods to write and organize related tests. You also learned how to execute instructions before and after tests run using the beforeAll, beforeEach, afterAll, and afterEach methods.

You then learned how to write tests using Puppeteer and Headless Chrome by simulating user interaction on your interface. To demonstrate the use of Puppeteer with Jest, we created an integration test to ensure the Umi locale plugin works correctly with the layout plugin and also created an end-to-end test to ensure the feature to edit an opportunity works as expected.

In the next chapter, we will learn how to compile and deploy our applications to online services.