Reactアプリケーションでの失敗テスト

Question

私は自分のアプリケーションのテストを書いています。私は初めてそれをやっているし、いくつかの問題があります。 テストを実行すると、私は失敗します。フェイルは下の画像にあります。私がしなければならないこと？私はモカと酵素を使用します。あなたはnは

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

：テスト

import 'jsdom-global/register'; 
 
import React from 'react'; 
 
import {mount, shallow} from 'enzyme'; 
 
import {expect} from 'chai'; 
 

 
import Header from '../../src/components/Header'; 
 
import Link from '../../src/components/Link'; 
 

 

 
describe ('',() => { 
 
    it('should have a logo image', function() { 
 
    const wrapper = mount(); 
 
    expect(wrapper.find('img')).to.have.length(1); 
 
    }); 
 
});

そして、私のコンポーネントのコードの

コード取り付け部品。引数としてコンポーネントをmount()に渡す必要があります。

const wrapper = mount();

は次のようになります。

const wrapper = mount(<Header />);