7

describeWithDOM()Enzymeとを使用して React Components の動作をテストしようとしていmount()ます。しかし、コンポーネントが jQuery をインポートすると、次のエラーが発生します。

エラー: jQuery にはドキュメントを含むウィンドウが必要です

Enzyme が内部で jsdom を使用していることは知っており、jsdom がウィンドウとドキュメントを管理しているといつも思っていました。しかし、これらを一緒に機能させる方法を見つけることができないようです。

テスト コードは次のようになります。

import chai, {expect} from 'chai';
import Select from './Select';
import React, {createElement} from 'react';
import {describeWithDOM, mount} from 'enzyme';

describe('UI Select', () => {

  //more shallow tests here

  describeWithDOM('User Actions', () => {
    it('Toggles the .ui-options menu on button click', () => {
      const wrapper = mount(<Select {...baseProps} />);
      expect(wrapper.state().open).to.not.be.ok;
      wrapper.find('button').simulate('click');
      expect(wrapper.state().open).to.be.ok;
    });
  });
}

ボタンの onClick メソッドでは、jquery 関数が呼び出されます。$('#inputSelector').focus()

テストで Enzyme と jsdom に jquery を使用させるにはどうすればよいですか?

4

1 に答える 1

4

describeWithDOM現在のバージョンの Enzyme では削除されています。代わりに、ここに示すように、すべてのテストの前に明示的に初期global.document化することをお勧めします。私はjQueryを使用していませんが、これは探している「ドキュメントのあるウィンドウ」を提供するはずだと思います。global.window

Enzyme 自身のテストが使用する初期化コードは、そのwithDom.jsファイルで利用できます。

if (!global.document) {
  try {
    const jsdom = require('jsdom').jsdom; // could throw

    const exposedProperties = ['window', 'navigator', 'document'];

    global.document = jsdom('');
    global.window = document.defaultView;
    Object.keys(document.defaultView).forEach((property) => {
      if (typeof global[property] === 'undefined') {
        exposedProperties.push(property);
        global[property] = document.defaultView[property];
      }
    });

    global.navigator = {
      userAgent: 'node.js',
    };
  } catch (e) {
    // jsdom is not supported...
  }
}

Mocha の--requireオプションを使用して、テストの前に確実に実行されるようにします。

mocha --require withDom.js --compilers js:babel-core/register --recursive test/*.js --reporter dot

于 2016-04-05T17:06:43.867 に答える