Тесты React компонентов. Mocha, Enzyme. Не проходят тесты

430

20 февраля 2017, 19:12

Использую Mocha, тесты Enzyme. Проект большой довольно таки и тесты пишутся(как обычно бывает) в самом конце, рефакторинг так сказать. Подскажите, делаю это впервые на React'e , нужно ли что-то добавлять вручную в webpack.config.js и вообще что может быть? Ловлю ошибку "Cannot read property 'apply' of undefined" или "Cannot read 'type' of undefined" скрины и код прилагается ниже ..

Код 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 Header from '../../src/components/Header'; 
 
describe('<Header />', () => { 
  it('must have an img', () => { 
    const wrapper = mount(<Header />); 
    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'; 
 
   
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));