1

Google マップを使用する反応モジュールが 1 つあるため、テストを実行する前に Google Places JavaScript を DOM にロードする必要があります。これらの外部ライブラリをjsdomにロードするにはどうすればよいですか?

4

1 に答える 1

6

このヘルパー クラスを使用できます。

// File: loadDOM.js

const jsdom = require('jsdom');

export default (documentLoaded) => {
  
  // Mock Image class since it's not found by default in jsdom
  global.Image = class Image {
    get complete() {
      return true;
    }
  };

  global.navigator = {
    userAgent: 'node.js',
  };

  jsdom.env({
    html: '<html><head></head><body></body></html>',
    scripts: [
      'https://maps.googleapis.com/maps/api/js?libraries=places',
      'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',
    ],
    done: (err, win) => {
      global.window = win;
      global.document = win.document;
      global.google = win.google;
      global.$ = win.jQuery;

      // Add other common globals
      Object.keys(win).forEach((property) => {
        if (typeof global[property] === 'undefined') {
          global[property] = win[property];
        }
      });
      // Done!
      documentLoaded();
    },
  });
};

次に、テストにロードします。

import { expect } from 'chai';
import { beforeEach, describe, it } from 'mocha';
import React from 'react';
import { mount } from 'enzyme';

import Hello from '../../components/Hello';

// Load virtual DOM
import loadDOM from '../loadDOM';

describe('<Hello />', () => {
  beforeEach((done) => {
    loadDOM(done);
  });

  it('Renders Hello component', () => {
    const props = {
      title: 'World',   
    }; 
    const wrapper = mount(<Hello {...props} />);
    expect(wrapper.find('#title')).to.equal(props.title);
  });
});

于 2016-08-05T11:41:41.010 に答える