TypeError：无法读取未定义的属性“应用”答案

【问题标题】：TypeError: Cannot read property 'apply' of undefinedTypeError：无法读取未定义的属性“应用”
【发布时间】：2017-02-17 21:06:07
【问题描述】：

无法测试反应组件。下面我放了我的 setup.js 的代码 - 我的配置文件和错误文本。

require('babel-register')();

var jsdom = require('jsdom').jsdom;

var 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'
};
//
var documentRef = document;

//
process.env.NODE_ENV = 'test';

function noop() {
  return null;
}

require.extensions['.css'] = noop;
require.extensions['.scss'] = noop;
require.extensions['.md'] = noop;
require.extensions['.png'] = noop;
require.extensions['.svg'] = noop;
require.extensions['.jpg'] = noop;
require.extensions['.jpeg'] = noop;
require.extensions['.gif'] = noop;

测试代码。这是一个非常简单的测试，但它失败了。(

编辑。我的组件代码如下。

import React from 'react';
import {mount, shallow} from 'enzyme';
import {expect} from 'chai';

import Header from '../../src/components/Header';



describe ('<Header />', () => {
  it('should have a logo image', function() {
    const wrapper = mount(<Header />);
    expect(wrapper.find('img')).to.have.length(1);
  });
});

在 WithStyles.componentWillMount (node_modules\isomorphic-style-loader\lib\withStyles.j 在 node_modules\react-dom\lib\ReactCompositeComponent.js:348:23 在 measureLifeCyclePerf (node_modules\react-dom\lib\ReactCompositeComponent.js:75:12)

class Header extends React.Component {
  static propTypes = {
    intl: intlShape.isRequired,
  };

  componentDidMount() {
    this.searchbox.refs.queryField.focus();
  }

  render() {
    return (
      <div className={s.root}>
        <div className={s.container}>
          <img className={s.alphaRibbon} src={alphaRibbon} alt="alpha" width="50px" />
          <Link className={s.brand} to="/">
            <img src={logoUrl2x} srcSet={`${logoUrl2x} 2x`} width="67" height="38" alt="8kolo" />
            <span className={s.brandTxt}>
              <FormattedMessage {...messages.brand} />
            </span>
          </Link>
          <Navigation className={s.nav} />
          <div className={s.search}>
            <SearchBoxRedirect
              ref={sb => { this.searchbox = sb; }}
              hitsRoute="/"
              searchOnChange
              placeholder={this.props.intl.formatMessage(messages.searchPlaceholder)}
              prefixQueryFields={['full_name']}
            />
          </div>
          {/* <LanguageSwitcher /> */}
        </div>
        {/* <div className={s.banner}>
          <div className={s.container}>
            <FormattedMessage tagName="p" {...messages.bannerDesc} />
          </div>
        </div>*/}
      </div>
    );
  }
}

export default withStyles(s)(injectIntl(Header));

【问题讨论】：

您也可以发布您的 Header 组件吗？看起来 react-dom 正在尝试渲染组件并且找不到某些功能适用。这可能是您的 Header 组件的错误。过去我遇到过问题，我的组件包含虚拟 DOM (jsdom) 不支持的代码。
我的 Header 组件效果很好。测试和连接有问题..
我已经添加了我的组件代码。

标签： javascript reactjs testing mocha.js

【解决方案1】：

您正在使用 webpack 和 isomorphic-style-loader 来解析对 CSS 文件的依赖关系，但您没有在测试设置中使用 webpack，对吧？要在测试设置中模拟样式加载，请尝试使用 css-modules-require-hook。

【讨论】：

我用它做什么？你的意思是我必须在 webpack 配置文件中添加依赖项？
不，在你初始化 JSDom 的 setup.js 中。参考 css-modules-require-hook 的 README 了解如何使用。
也许我做错了什么，但我无法解决我的问题。