React组件测试。摩卡，酵素测试。错误

Question

我正在使用摩卡和酵素测试。第一次在React应用中写测试。项目很大，所以我不能做这个开始。告诉我，我是否需要在webpack.config文件中添加一些内容，以及如何处理错误（如下） “无法读取属性'undefined”或“无法读取”类型'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 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为 '进口{}头......' 我获得屏幕下方的新错误

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