Jspreadsheet keyboard_arrow_right Documentation keyboard_arrow_right React keyboard_arrow_right Tests

Testing Jspreadsheet in React with Jest

Introduction

Unit testing ensures correct component behavior and prevents regressions in React applications. This guide covers Jest configuration and test implementation for Jspreadsheet components in React projects.

This document provides:

• Jest and JSDOM environment configuration
• Jspreadsheet test setup procedures
• Example test implementations

Environment Setup

Configure Jest and JSDOM for testing Jspreadsheet in React applications.

Step 1: Project Initialization

Create a new React project or use an existing project:

npx create-next-app jspreadsheet-react-testing
cd jspreadsheet-react-testing

Step 2: Install Dependencies

Install required dependencies:

npm install jspreadsheet-ce@5
npm install --save-dev [email protected] [email protected]

Step 3: Jest Configuration

Configure Jest for Jspreadsheet testing. Create jest.setup.js in the project root:

// jest.setup.js

const jspreadsheet = require('jspreadsheet-ce');

  // Code that runs between each test
beforeEach(() => {
    if (typeof document !== 'undefined') {
        jspreadsheet.destroyAll();

        if (!global.jspreadsheet && !global.root) {
            global.jspreadsheet = jspreadsheet;

            global.root = document.createElement('div');
            global.root.style.width = '100%';
            global.root.style.height = '100%';

            document.body.appendChild(global.root);
        }
    }
});

Configure Jest in package.json:

{
  "jest": {
    "setupFilesAfterEnv": ["<rootDir>/jest.setup.js"]
  }
}

This configuration enables JSDOM to provide the DOM environment required for Jspreadsheet operations.

Step 4: Create a Test

Create a folder inside your project if it doesn't exist, then inside this folder create a file named jspreadsheet.test.js.

// */tests/jspreadsheet.test.js

/**
 * @jest-environment jsdom
 */

test("Testing data", () => {
    let instance = jspreadsheet(root, {
        worksheets: [
            {
                data: [
                    ["Mazda", 2001, 2000],
                    ["Peugeot", 2010, 5000],
                    ["Honda Fit", 2009, 3000],
                    ["Honda CRV", 2010, 6000],
                ],
                minDimensions: [4, 4],
            },
        ],
    });

    expect(instance[0].getValue("A1", true)).toEqual("Mazda");
    expect(instance[0].getValue("A2", true)).toEqual("Peugeot");
    expect(instance[0].getValue("B1", true)).toEqual("2001");
});

This test verifies that a basic Jspreadsheet instance is created and that the data values are correctly placed. You can modify it to check whatever you want to test.

Running the Tests

Ensure you add the following line to the scripts section of your package.json:

"test": "jest"

After creating your tests and updating package.json, you can run them using the following command:

npm test

Jest will run all the tests in your project and display the results in the console. If everything is configured correctly, your tests should pass.