2017-02-17 10 views
0

Не удается проверить компонент реакции. Ниже я поставил код моего setup.js - мой файл конфигурации и текст ошибки.TypeError: Невозможно прочитать свойство 'apply' of undefined

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;

код Test. Это очень простой тест, и он выходит из строя. (

Редактирование. Мой код компонента ниже.

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 \ изоморфного стиле погрузчиком \ Lib \ withStyles.j на node_modules \ реагируют-дом \ Lib \ ReactCompositeComponent.js: 348: 23 на measureLifeCyclePerf (node_modules \ реагируют-дом \ 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));

+0

Можете ли вы также разместить компонент заголовка? Похоже, что реакция-dom пытается отобразить компонент и не может найти какую-либо функцию. Это может быть ошибка в компоненте Header. У меня были проблемы в прошлом, когда у моего компонента был код, который не поддерживался виртуальным DOM (jsdom). –

+0

Компонент My Header отлично работает. Есть проблема в тесте и в связи. –

+0

Я добавил свой код компонента. –

ответ

1

Вы используете Webpack с изоморфной-стиле-загрузчиком для разрешения зависимостей в CSS-файлов, но вы не используете Webpack в вашей тестовой конфигурации, не так ли? Чтобы эмулировать загрузку стиля в тестовой настройке, попробуйте использовать css-modules-require-hook.

+0

Что я с ним делаю? Вы имеете в виду, что мне нужно добавить зависимости в файл конфигурации webpack? –

+0

Нет, в вашем setup.js, где вы инициализируете свой JSDom. Обратитесь к README css-modules-require-hook, чтобы узнать, как его использовать. –

+0

Okey, спасибо, я уже установил его и сейчас прочитал. –