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("YTRmZDNhNmUyODcxYzNhODBmZmUzYmZlNDZlNjU2ZTUxMzBiZjI2NmM3ZTNmYWYwYTdlZjk2YmVhZjZhNDM0ZDYzZDYwMTgxMDEzNGI4MDI2ZWE5MDRiMWNlZTdmY2U2MDgwNDA4Nzc2MWE5NTlhMWJjMjQ2NzgyODUxNzBhMTEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXdNekkzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9"); 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"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('YTRmZDNhNmUyODcxYzNhODBmZmUzYmZlNDZlNjU2ZTUxMzBiZjI2NmM3ZTNmYWYwYTdlZjk2YmVhZjZhNDM0ZDYzZDYwMTgxMDEzNGI4MDI2ZWE5MDRiMWNlZTdmY2U2MDgwNDA4Nzc2MWE5NTlhMWJjMjQ2NzgyODUxNzBhMTEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXdNekkzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); 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( 'YTRmZDNhNmUyODcxYzNhODBmZmUzYmZlNDZlNjU2ZTUxMzBiZjI2NmM3ZTNmYWYwYTdlZjk2YmVhZjZhNDM0ZDYzZDYwMTgxMDEzNGI4MDI2ZWE5MDRiMWNlZTdmY2U2MDgwNDA4Nzc2MWE5NTlhMWJjMjQ2NzgyODUxNzBhMTEsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXdNekkzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9' ); // 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