javascript - 类型错误 : Cannot read property 'apply' of undefined

Question

无法测试 react 组件。下面我放了我的 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));

Answer 1

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