Add unit tests to an Oracle JET virtual DOM app

Introduction

Testing is a crucial part of the development lifecycle, ensuring the creation of robust and stable web apps. There are various types of testing, such as end-to-end testing and integration testing. Unit testing involves writing tests for individual units of code, including classes, functions, or methods. It is good practice to write unit tests early in the development process. Starting early not only demonstrates the importance of testing but also increases the likelihood of achieving full test coverage, rather than waiting until the web app is fully functional and complex.

Objectives

In this tutorial, you will learn how to install testing tools using the Oracle JET CLI add testing command, and how to write and run a unit test in the Oracle JET virtual DOM app.

The add testing command installs Jest and the Preact Testing Library, in addition to updating the scripts section of your app’s package.json file with commands to execute the unit tests that you write.

Note: Don’t use Jest to test or interact with the Oracle JET UI components in your app. The Oracle JET team tested these components extensively as part of the components’ development process. Instead, use Jest to write unit tests for code that you write in your app. To perform automated UI testing of the Oracle JET virtual DOM app that you develop, use our Oracle JET Component WebElements UI automation library (@oracle/oraclejet-webdriver). This library, built on top of Selenium WebDriver, is designed to work with JET components. To get started, see Set up an environment to create UI automation tests for Oracle JET web apps.

Prerequisites

Task 1: Add the Testing Libraries

  1. Navigate to the JET-Virtual-DOM-app folder, and add the testing libraries.

    npx ojet add testing

    The Oracle JET tooling creates a test-config folder in the JET-Virtual-DOM-app folder with the configuration files that the testing libraries require:

    ./JET-Virtual-DOM-app/test-config
jest.config.js
testSetup.ts

    It also updates the package.json file with the testing tools that the add testing command installs. These updates include entries for Jest and the Preact Testing Library.

    . . .
 "devDependencies": {
   . . .
   "@oracle/oraclejet-jest-preset": "16.0.11",
   "@testing-library/preact": "3.2.3",
   "@types/jest": "29.5.3",
   . . .
   "jest": "29.6.2",
   "jest-environment-jsdom": "29.6.2",
   . . .
},

    Finally, it updates the scripts section in the package.json file with commands to invoke the testing library.

    . . .
"scripts": {
 . . .
  "test": "jest -c test-config/jest.config.js",
  "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand"
 },

Task 2: Write a Unit Test

  1. Navigate to the JET-Virtual-DOM-app/src/components/content folder, and create a new folder named __tests__.

  2. In the newly-created JET-Virtual-DOM-app/src/components/content/__tests__ folder, create a test script file named content.spec.tsx.

  3. In the content.spec.tsx file, write entries that test for the presence of the string Product Information in the JET-Virtual-DOM-app/src/components/content file. The test also expects this string to be enclosed in a H1 element tag.

    import { h } from "preact";
import { render } from "@testing-library/preact";
import { Content } from "../index";
   
test("renders Product Information header with a h1 heading", () => {
   const { getByText } = render(<Content />);
   const headerElement = getByText("Product Information");
   expect(headerElement.tagName).toBe("H1");
});

    The completed content.spec.tsx test script file also uses jest.mock calls to provide access to the imports (store_data.json and ojs/ojmutablearraydataprovider) that an instance of the Content component requires. To include these jest.mock calls in your test script file, see content-spec-tsx.txt.

Task 3: Run the Unit Test

In the terminal window, navigate to the JET-Virtual-DOM-app directory and execute the unit test in the JET-Virtual-DOM-app/src/components/content/__tests__ folder by running the following command.

npm test

The test executes and displays console output similar to the following.

$ npm test

> JET-Virtual-DOM-app@1.0.0 test
> jest -c test-config/jest.config.js

PASS  src/components/content/__tests__/content.spec.tsx
Test suite for Content component
   √ Renders Product Information header with a H1 tag (14 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.145 s
Ran all test suites.

Next Step

To proceed to the next tutorial in this learning path, click here.

More Learning Resources

Explore other labs on docs.oracle.com/learn or access more free learning content on the Oracle Learning YouTube channel. Additionally, visit education.oracle.com/learning-explorer to become an Oracle Learning Explorer.

For product documentation, visit Oracle Help Center.