'how to add a unit test for Tableau Embedded Component?
I would like add a unit test to a simple react(TS) component that embeds a tableau dashboard using the Tableau Javascript API.
An error occurs when I try to run the test file, i get the following error:
When the page renders, under the <TableauReport /> an <iframe /> will be mounted which is generated by Tableau Javascript; see logic under the useEffect
Not sure if this is an issue with react-testing-library, but I've read also it could be an issue with jsdom version; version is 16.7.0
Here is the component:
import React, { useEffect, useRef } from 'react';
import { server } from '../../constants/tableau'
interface TableauProps {
options: {
hideToolbar: boolean,
};
view: string;
ticket?: string;
}
const { tableau }: any = window;
const setVizStyle = {
width: "800px",
height: "700px",
};
const TableauReport = ({ options, view }: TableauProps) => {
const url = `${server}${view}`
const tableauRef = useRef<HTMLDivElement>(null);
useEffect(() => {
new tableau.Viz(tableauRef.current, url, options)
}, []);
return (
<div style={setVizStyle} ref={tableauRef} />
);
};
export default TableauReport;
Here is the test:
describe("Tests", () => {
let windowSpy: any;
beforeEach(() => {
windowSpy = jest.spyOn(window, "window", "get");
})
afterEach(() => {
windowSpy.mockRestore();
})
const tableauOptions = {
hideToolbar: true,
}
it('should render the component', () => {
windowSpy.mockImplementation(() => {
tableau: {
Viz: jest.fn();
}
})
render(<TableauReport options={tableauOptions} view={dashboard}/>)
})
});
Initially, I had an issue with the Viz method in the test, it was not being recognized. I had to add a spyOn to then window object and mock the implementation.
Is that the right approach to test the window.tableau?
I was wondering is there a proper way for testing an embedded tableau dashboard using react-testing-library.
Here is the tutorial I followed on how to embed a tableau dashboard using react, link
I'm new to tableau, so any help will be highly appreciated, thanks :)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

