Question

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

＆＃13;

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;

＆＃13;

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

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

＆＃13;

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);
  });
});

＆＃13;

at WithStyles.componentWillMount（node_modules \ isomorphic-style-loader \ lib \ withStyles.j 在node_modules \ react-dom \ lib \ ReactCompositeComponent.js：348：23 at measureLifeCyclePerf（node_modules \ react-dom \ lib \ ReactCompositeComponent.js：75：12）

＆＃13;

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));

＆＃13;

Answer 1

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

TypeError：无法读取属性＆＃39; apply＆＃39;未定义的

1 个答案: