I use Mocha, Enzyme tests. The project is pretty big and the tests are written (as usual) at the very end, refactoring, so to speak. Tell me, I do it for the first time on React, is it necessary to add something manually in webpack.config.js and in general what could be? I catch the error "Cannot read property 'apply' of undefined" or "Cannot read 'type of undefined" screenshots and code is attached below ..

enter image description here

Setup.js code

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;

Test code

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

Just in case the component code:

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

    0