Question

我正在尝试使用Enzyme的mount()和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; }); }); }测试React Components行为。但是当组件导入jQuery时，我得到了这个错误：

错误：jQuery需要一个带文档的窗口

我知道Enzyme在引擎盖下使用了jsdom，我一直认为jsdom负责窗户和文件。但我似乎无法找到如何让这些合作。

测试代码如下所示：

$('#inputSelector').focus()

在onClick方法按钮中，调用jquery函数：<servlet-mapping> <servlet-name>jsp</servlet-name> <url-pattern>*.jsp</url-pattern> <url-pattern>*.jspf</url-pattern> </servlet-mapping>

我怎样才能让Enzyme和jsdom在测试中使用jquery？

Answer 1

describeWithDOM已在当前版本的Enzyme中删除，而是建议在所有测试显式global.document和global.window之前显示here。我不使用jQuery，但我认为这应该提供它正在寻找的“带有文档的窗口”。

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

如果React组件需要jQuery，则会引发错误

1 个答案: