Tests

Unit testing examples for Jspreadsheet components in React, Vue, and Angular applications.

React Testing

Component (Jspreadsheet.js)

import {useEffect, useRef} from "react";
import jspreadsheet from "jspreadsheet";

import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

jspreadsheet.setLicense("OWU1MDA1NDRjMzZiZWM4ZWYyMDIyNjUwMzQxNWYxYTNiZTY5M2I5MmU2M2VmNzljOGQ0ZDQyYWEwYTcwMWJiMjViM2JlZmMwMzIxZTMwNjgwYzMyNTk2NDY2NWQ5NDM3MzFjOTNjNzRjZDQ5Y2VlMDlmNmRlZGIyZTJmY2UyNWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZek9UZzVNRGt3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5");

function Jspreadsheet() {
    const jssDiv = useRef(null);
    const jssInstance = useRef(null);

    useEffect(() => {
        jssInstance.current = jspreadsheet(jssDiv.current, {
            worksheets: [
                {
                    data: [["teste 1", "teste 2", "teste 3"]],
                },
            ],
        });
    }, []);

    return <div ref={jssDiv}></div>;
}

export default Jspreadsheet;

<template>
  <Spreadsheet ref="spreadsheet">
    <Worksheet :data="data" :columns="columns" />
  </Spreadsheet>
  <input type="button" value="getData" @click="getData()" />
</template>

<script>
import { Spreadsheet, Worksheet, jspreadsheet } from '@jspreadsheet/vue'
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('OWU1MDA1NDRjMzZiZWM4ZWYyMDIyNjUwMzQxNWYxYTNiZTY5M2I5MmU2M2VmNzljOGQ0ZDQyYWEwYTcwMWJiMjViM2JlZmMwMzIxZTMwNjgwYzMyNTk2NDY2NWQ5NDM3MzFjOTNjNzRjZDQ5Y2VlMDlmNmRlZGIyZTJmY2UyNWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZek9UZzVNRGt3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
  components: {
    Spreadsheet,
    Worksheet
  },
  data() {
    // Worksheet data
    const data = [
      ['US', 'Cheese', '2019-02-12'],
      ['CA', 'Apples', '2019-03-01'],
      ['CA', 'Carrots', '2018-11-10'],
      ['BR', 'Oranges', '2019-01-12']
    ]

    // Columns
    const columns = [{ width: '300px' }, { width: '200px' }, { width: '200px' }]

    return {
      data,
      columns
    }
  }
}
</script>

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import jspreadsheet from 'jspreadsheet';
import "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";

@Component({
  standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild('spreadsheet') spreadsheet: ElementRef;

  ngAfterViewInit() {
    // License for Formula Plugin
    jspreadsheet.setLicense(
      'OWU1MDA1NDRjMzZiZWM4ZWYyMDIyNjUwMzQxNWYxYTNiZTY5M2I5MmU2M2VmNzljOGQ0ZDQyYWEwYTcwMWJiMjViM2JlZmMwMzIxZTMwNjgwYzMyNTk2NDY2NWQ5NDM3MzFjOTNjNzRjZDQ5Y2VlMDlmNmRlZGIyZTJmY2UyNWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZek9UZzVNRGt3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5'
    );

    // Create spreadsheet
    jspreadsheet(this.spreadsheet.nativeElement, {
      worksheets: [
        {
          data: [[]],
          minDimensions: [6, 4],
          columns: [
            {
              type: 'dropdown',
              width: 100,
              source: ['Y', 'N'],
            },
            {
              type: 'color',
              width: 100,
              render: 'square',
            },
          ],
        },
      ],
    });
  }
}

Test File (Jspreadsheet.test.js)

import { render, screen } from "@testing-library/react";
import Jspreadsheet from "./Jspreadsheet";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

test("renders simple table", () => {
  render(<Jspreadsheet />);

  const firstValue = screen.getByText("teste 1");
  expect(firstValue).toBeInTheDocument();

  const secondValue = screen.getByText("teste 2");
  expect(secondValue).toBeInTheDocument();

  const thirdValue = screen.getByText("teste 3");
  expect(thirdValue).toBeInTheDocument();
});

import { describe, it, expect } from 'vitest'

import { mount } from '@vue/test-utils'
import JspreadsheetComponent from '../components/JspreadsheetComponent.vue'

describe('JspreadsheetComponent', () => {
  it('renders properly', () => {
    const component = mount(JspreadsheetComponent)

    expect(component.find('td[data-x="1"][data-y="3"]').text()).toContain('Oranges')
  })
})

import { AppComponent } from './app.component';

describe('AppComponent', () => {
  it('should create the app', () => {
    const component = new AppComponent();

    expect(component).toBeTruthy();
  });
});

Testing Best Practices

DOM Testing: Target specific cells using data attributes like data-x="0" data-y="1"
Async Operations: Use waitFor when testing dynamic content or formula calculations
Mocking: Mock API calls in custom formulas to avoid network dependencies
Instance Cleanup: Destroy spreadsheet instances in afterEach to prevent memory leaks
User Events: Test interactions like cell editing, row insertion, and formula updates

Edit this page on GitHub