javascript - react 组件测试。 Mocha ， enzyme 测试。错误

Question

我正在使用 Mocha 和 enzyme 测试。第一次在 React 应用程序中编写测试。项目很大，所以我不能从一开始就做这个。请告诉我，我是否需要在 webpack.config 文件中添加一些内容以及如何处理错误(如下) “无法读取未定义的属性‘应用’”或“无法读取未定义的‘类型’”

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

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 { expect } from 'chai';
import { mount, shallow } from 'enzyme';
import configStore from 'redux-mock-store'

import { defineMessages, FormattedMessage, injectIntl, intlShape } from 'react-intl';

import { LanguageSwitcher } from '../../src/components/LanguageSwitcher';
import { Header } from '../../src/components/Header';
import { SearchBoxRedirect } from '../../src/components/Header';
import { Link } from '../../src/components/Link';
import { Navigation } from '../../src/components/Navigation';


describe('<Header />', () => {
  const mockStore = configStore()

  it('must have an img', () => {
    const intlMockup = {
      formatMessage: () => ('')
    }

    const intlMockupDate = {
      formatDate: () => ('')
    }

    const intlMockupTime = {
      formatTime: () => ('')
    }

    const store = mockStore()


    const wrapper = mount(<Header intl={intlMockup, intlMockupDate, intlMockupTime} />);
    expect(wrapper.find('img')).to.have.length(1);

  });
});

以防万一，我的简单组件的代码:

import React from 'react';
import { defineMessages, FormattedMessage, injectIntl, intlShape } from 'react-intl';
import SearchBoxRedirect from './SearchBoxRedirect';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Header.css';
import Link from '../Link';
import Navigation from '../Navigation';
import LanguageSwitcher from '../LanguageSwitcher';
import logoUrl from './logo-small.png';
import logoUrl2x from './logo-small@2x1.png';
import alphaRibbon from './alpha-ribbon.png';

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

当我将 import Header from ../Header 更改为“import {Header} from ...”时，我在下面的屏幕上收到了一个新错误

Answer 1

我认为问题在于您正在测试需要父组件上下文的 HOC。

您始终可以将纯组件与默认包装组件一起导出以进行测试。

组件.js

export class Header extends React.Component {
  ...
}
export default withStyles(s)(injectIntl(Header));

测试代码

import { Header } from '../../src/components/Header';
describe('<Header />', () => {
  it('must have an img', () => {
    const intlMockup = {
      formatMessage: () => (''),
      formatDate: () => (''),
      formatTime: () => (''),
    }
    const store = mockStore()
    const wrapper = mount(<Header intl={intlMockup} store={store} />);
    expect(wrapper.find('img')).to.have.length(1);
  });
});