Испытание реактивных компонентов. Мокка, ферментные тесты. Ошибки

Question

Я использую тесты Mocha и Enzyme. Сначала напишите тест в приложении React. Проект большой, поэтому я не могу это сделать. Скажите мне, plz, мне нужно добавить что-то в файл 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 на "импорт {Header} из ... Я получить новые ошибки, которые на экране ниже

Answer 1

Я думаю, проблема в том, что вы тестируете HOC, который требует контекста от родительского компонента.

Вы всегда можете экспортировать чистый компонент вместе с включенным по умолчанию компонентом для тестирования.

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