ReferenceError: google is not defined

Not sure if this is related to this repo, or Jest. But I’m getting this error when running my test:

ReferenceError: google is not defined
at GoogleAutoComplete.componentDidMount (src/components/GoogleAutoComplete/index.js:38:31)

I have a script tag before my closing body tag that loads the google API. But apparently that’s not loaded into the test environment.

So I download that google api file and put it in my project directory under test/google.js.

I then tried to configure jest to load that file in my package.json:

{
  "name": "web-app",
  "jest": {
    "setupTestFrameworkScriptFile": "test/google.js"
  }
  ...

I also tried using setupFiles:

{
  "name": "web-app",
  "jest": {
    "setupFiles": [
      "test/google.js"
    ],
    ...

Neither of which seem to be loading the file. I also tried loading a file that doesn’t exist and it didn’t throw any errors, which makes me wonder if create-react-app is even loading jest config from package.json.

What’s the correct way to load google into the test environment? Is this a bug, or am I over locking something?

[gaearon]

This worked for me.

src/setupTests.js

window.google = {
  maps: {
    places: {
      Autocomplete: class {}
    }
  }
};

src/App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  componentDidMount() {
    const elem = document.getElementById('autocomplete')
    this.autocomplete = new window.google.maps.places.Autocomplete(elem, { types: ['geocode'] })
  }

  // ...

You’d have to either add some mock methods to the class as you use them, or switch to shallow rendering for testing so that componentDidMount never fires.

[gaearon]

If you need to access a global, access it explicitly as window.google. This is better than a mix of implicit globals scattered around the code.