TypeError：无法读取未定义的属性“ apply”

Question

Can't testing a react component. Below I put code of my setup.js - my configure file and text of error.

 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 code. This is very simple test and it fails.(

Editing. My component code is below.

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

at WithStyles.componentWillMount (node_modules\\isomorphic-style-loader\\lib\\withStyles.j at node_modules\\react-dom\\lib\\ReactCompositeComponent.js:348:23 at measureLifeCyclePerf (node_modules\\react-dom\\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)); 

Answer 1

You're using webpack with isomorphic-style-loader to resolve dependencies to CSS files, but you're not using webpack in your test setup, right? To emulate the style loading in your test setup, try using css-modules-require-hook .