2017-02-17 13 views
1

Я пишу тесты для своего приложения. Я делаю это в первый раз и испытываю некоторые проблемы. Когда я запускаю тесты, я получаю сбои. На рисунке ниже находится файл. Что мне нужно сделать? Я использую мокко и фермент. enter image description hereНеудачная проверка в приложении React

Код испытания

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

И код моего компонента:

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

Вы п с монтажным компонентом. Вы должны передать компонент в качестве аргумента в mount().

const wrapper = mount();

Должно быть:

const wrapper = mount(<Header />);

+0

Я попробовал. Это неверно слишком –

+0

, когда я положил

, тогда я получу ошибку: Ошибка: похоже, вы назвали 'mount()' без загрузки глобального документа. –

+0

Итак, вы запускаете тесты без драйвера браузера. В этом случае вы не можете смонтировать компонент в dom, потому что в вашей среде нет dom :) Вместо этого вы должны использовать 'jsdom', чтобы издеваться над браузером. Или вы не можете проверить его с помощью «мелкой», но в этом случае вы не сможете тестировать материал из метода жизненного цикла компонента. –