asked on September 24, 2025
Hello,
We are trying to run automated tests with Vitest using jsdom as the environment. Our goal is to test Flexmonster reports and validate cell content via the API (e.g., using getData).
Here is our setup:
Testing framework: Vitest
Test environment: jsdom
Flexmonster loaded from CDN (https://cdn.flexmonster.com/flexmonster.js)
We create a container <div id="pivot-container"></div> in the test and initialize Flexmonster with a small inline dataset.
Example:
describe("Flexmonster in Vitest", () => {
it("should initialize and return data", async () => {
const Flexmonster = await loadFlexmonster()
const container = document.createElement("div")
container.id = "pivot-container"
document.body.appendChild(container)
const pivot = new Flexmonster({
container: "#pivot-container",
report: {
dataSource: {
data: [
{ Category: "Books", Sales: 120 },
{ Category: "Electronics", Sales: 300 },
],
},
slice: {
rows: [{ uniqueName: "Category" }],
measures: [{ uniqueName: "Sales", aggregation: "sum" }],
},
},
})
// ❌ Problem: none of these events fire in jsdom
await new Promise<void>((resolve) => {
pivot.on("reportcomplete", () => resolve())
pivot.on("reportchange", () => resolve())
pivot.on("updatedata", () => resolve())
})
// ❌ This never resolves in jsdom
const data = await new Promise<any>((resolve) => {
pivot.getData({}, (res) => resolve(res))
})
// Expect first row values
expect(data.data[0].c[0].v).toBe("Books")
expect(data.data[0].c[1].v).toBe(120)
})
})
Expectation:
We would like to be able to:
Initialize Flexmonster in a headless test environment (Vitest with jsdom).
Access the processed data (via getData) so we can validate cell content programmatically in our unit tests.
Question:
Can you please share an example on how this unit test could be performed ?
Any guidance or best practices would be appreciated.
Thank you,
⋅ September 25, 2025
Hello,
Thank you for writing to us.
Running Flexmonster in a test environment like JSDOM is not recommended because it does not provide a full browser simulation. For your use case, we suggest writing E2E tests with frameworks such as Playwright or Cypress. These frameworks run tests in a real browser environment, ensuring Flexmonster initializes correctly, renders reports, and triggers the expected events.
We rely on the E2E testing approach in production to validate our component, and we maintain an extensive test base. Because of this, it is often more practical to test the whole application with Flexmonster rather than test Flexmonster in isolation.
The main advantage of using E2E testing is that instead of focusing only on the pivot, you can test entire pages with Flexmonster in a real browser environment. This allows you to verify that the pivot displays data correctly, that it integrates smoothly with other UI components, and that user flows work as intended when interacting with custom controls relying on Flexmonster’s API.
Still, if you would like to run tests with Vitest and JSDOM, here are some adjustments and suggestions:
container property."reportcomplete".import { expect, test } from 'vitest'
import Flexmonster from 'flexmonster'
import 'flexmonster/flexmonster.css'
test('Flexmonster', async () => {
const container = document.createElement("div")
container.id = "pivot-container"
document.body.appendChild(container)
const pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
report: {
dataSource: {
data: [
{ Category: "Books", Sales: 120 },
{ Category: "Electronics", Sales: 300 },
],
},
slice: {
rows: [{ uniqueName: "Category" }],
measures: [{ uniqueName: "Sales", aggregation: "sum" }],
},
},
//licenseKey: "XX-XXXX-XXXX-XXXX-XXXX-XXXXXX-XXXX-XXXX-XXXX-XX" //Replace with your license key
})
await new Promise<void>((resolve) => {
pivot.on("reportcomplete", () => {
console.log("Report is complete")
resolve()
});
});
console.log("Test started")
const testData = await new Promise<any>((resolve) => {
pivot.getData({}, (res) => resolve(res.data))
})
expect(testData[1].r0).toBe("Books")
expect(testData[1].v0).toBe(120)
})
Looking forward to hearing your feedback.
Best Regards,
Maksym
⋅ 3 days ago
Hello,
Hope you are doing well.
Just checking in to see if my suggestions helped resolve issues with testing in Vitest.
We are looking forward to hearing your feedback.
Best regards,
Maksym