'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:

enter image description here

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