Reactjs 使用jsdom进行Jest测试-添加GoogleMapsAPI_Reactjs_Jestjs_Jsdom

Reactjs 使用jsdom进行Jest测试-添加GoogleMapsAPI

reactjs jestjs

Reactjs 使用jsdom进行Jest测试-添加GoogleMapsAPI,reactjs,jestjs,jsdom,Reactjs,Jestjs,Jsdom,测试使用google maps autocomplete和React Geosugest包的React应用程序使用以下内容设置js dom： import requestAnimationFrame from './tempPolyfills'; import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; configure({ adapter: new Adapter(), disa

测试使用google maps autocomplete和React Geosugest包的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);

import requestAnimationFrame from./tempPolyfills'；
从“酶”导入{configure}；
从'enzyme-Adapter-react-16'导入适配器；
配置（{adapter:newadapter（），disableLifecycleMethods:true}）；
const{JSDOM}=require（'JSDOM'）；
constjsdom=新的jsdom(`
log（Window.google）
`，{runScripts:“危险的”}）；
const{window}=jsdom；
功能copyProps（src、target）{
const props=Object.getOwnPropertyNames（src）
.filter（prop=>typeof target[prop]==='undefined'）
.减少（（结果，道具）=>({
…结果，
[prop]：Object.getOwnPropertyDescriptor（src，prop），
}), {});
对象。定义属性（目标、道具）；
}
global.window=窗口；
global.document=window.document；
global.navigator={
userAgent:'node.js'，
};
复制道具（窗口、全局）；

我知道GoogleMapsAPI将google:method添加到窗口（so window.google}

但是，我的测试失败了，因为在页面上找不到google maps API。我可以在控制台日志窗口中确认这一点。google未定义

这是因为jsdom是在maps API更新DOM之前返回的吗

有没有更好的方法来测试使用谷歌地图API的组件

尝试了该解决方案，但仍然给我未定义的

最终模拟了整个google响应，并在我的设置测试文件中定义了它：

window.google=global.google=googleStub（）；

如果有人关心

Hi@Dale King，你能告诉我们你是如何做到的吗？