I'm using the google script tag from their CDN (tried body and head) <script src=".min.js"></script>

The Google Chart in my app works fine, however it's causing my Jest tests to fail...

Inside of the <ChartComponent />

ponentDidMount() {
    // Load the Visualization API and the corechart package.
    console.log('Chart mounted');
    google.charts.load('current', { packages: ['corechart', 'line'] });
    google.charts.setOnLoadCallback(this.getSocialData({ days: this.state.days }));
}

Is there a simple way around this?

What I've tried

import React from 'react'
import { mount, shallow } from 'enzyme'
import toJson from 'enzyme-to-json'
import Trends from './Trends'
import Chart from '../entity/Chart'
const body = { subject: { id: 0 } };
const TrendComponent = shallow(<Trends body={body}/>);
const func = function() {};
let google = {};

const setGoogleObj = () => {
    google = {
        charts: {
            load: func
        }
    }
}

beforeEach(() => {
    return setGoogleObj();
});

const TrendComponentMount = mount(<Trends body={body} google={google}/>);

describe('<Trends />', () => {
    it('renders', () => {
        const tree = toJson(TrendComponent);
        expect(tree).toMatchSnapshot(TrendComponent);
    });

    it('contains the Chart ponent', () => {
        expect(TrendComponent.find(Chart).length).toBe(1);
    });
});

I'm using the google script tag from their CDN (tried body and head) <script src="https://wikitags./js/googlecharts.min.js"></script>

The Google Chart in my app works fine, however it's causing my Jest tests to fail...

Inside of the <ChartComponent />

ponentDidMount() {
    // Load the Visualization API and the corechart package.
    console.log('Chart mounted');
    google.charts.load('current', { packages: ['corechart', 'line'] });
    google.charts.setOnLoadCallback(this.getSocialData({ days: this.state.days }));
}

Is there a simple way around this?

What I've tried

import React from 'react'
import { mount, shallow } from 'enzyme'
import toJson from 'enzyme-to-json'
import Trends from './Trends'
import Chart from '../entity/Chart'
const body = { subject: { id: 0 } };
const TrendComponent = shallow(<Trends body={body}/>);
const func = function() {};
let google = {};

const setGoogleObj = () => {
    google = {
        charts: {
            load: func
        }
    }
}

beforeEach(() => {
    return setGoogleObj();
});

const TrendComponentMount = mount(<Trends body={body} google={google}/>);

describe('<Trends />', () => {
    it('renders', () => {
        const tree = toJson(TrendComponent);
        expect(tree).toMatchSnapshot(TrendComponent);
    });

    it('contains the Chart ponent', () => {
        expect(TrendComponent.find(Chart).length).toBe(1);
    });
});

• javascript
• reactjs
• enzyme
• google-visualization
• jestjs

• Is "google" an import or a global variable ? – Rosmarine Popcorn Commented Jun 20, 2017 at 15:33
• Sorry, it's a script tag import from their CDN, was in the body, but I also tried putting it in the head – Leon Gaban Commented Jun 20, 2017 at 15:35
• 1 In that case use beforeEach() hook of Jest and assign a dummy object to variable google. I suggest sinon.js for mocking / stubing it's behaviour and don't forget to clean up after you're done. – Rosmarine Popcorn Commented Jun 20, 2017 at 15:36
• Thanks for the tip, looking at the Docs now, tried setting a dummy object, but unsure how to pass it in? It's not a prop – Leon Gaban Commented Jun 20, 2017 at 15:44
• 1 Just declare it as a global : globals.google = {} or google = {} – Rosmarine Popcorn Commented Jun 20, 2017 at 15:56

1 Answer 1

Had to add this to my jest key inside of package.json

Thanks to @Burimi for helping me debug, this setups a default global

"jest": {
  "globals":{
    "google": {
    }
  }
  ...