使用 jsdom 进行 Jest 测试 - 添加 Google 地图 API

Question

使用包 react-geosuggest 测试使用 google 地图自动完成的 React 应用程序。

用这个设置 js dom：

import requestAnimationFrame from './tempPolyfills';

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter(), disableLifecycleMethods: true });


const { JSDOM } = require('jsdom');

const jsdom = new JSDOM(`
  <!doctype html>
  <html>
    <head>
      <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<our maps key>&libraries=places"></script>
      <script>console.log(Window.google)</script>
    </head>
    <body>
    </body>
  </html>`, {runScripts: "dangerously"});
const { window } = jsdom;

function copyProps(src, target) {
  const props = Object.getOwnPropertyNames(src)
    .filter(prop => typeof target[prop] === 'undefined')
    .reduce((result, prop) => ({
      ...result,
      [prop]: Object.getOwnPropertyDescriptor(src, prop),
    }), {});
  Object.defineProperties(target, props);
}

global.window = window;
global.document = window.document;
global.navigator = {
  userAgent: 'node.js',
};
copyProps(window, global);

我明白 google 地图 API 添加了 google: 方法到 window （所以 window.google}

但是我的测试失败了，说在页面上找不到 google 地图 API。我可以确认此尝试控制台日志 window.google 未定义。

这是因为 jsdom 在地图 API 可以更新 DOM 之前被返回了吗？

是否有更好的方法来测试使用 google 映射的组件 API？

尝试了解决方案here，但仍然未定义

Answer 1

结束模拟整个 google 响应并在我的设置测试文件中定义它：

window.google = global.google = googleStub();

如果有人关心

使用 jsdom 进行 Jest 测试 - 添加 Google 地图 API

Jest Testing with jsdom - Adding Google maps API

jsdom

reactjs

jestjs