React应用程序中的测试失败

Question

我正在为我的应用编写测试。我是第一次这样做，有一些麻烦。 当我运行测试时，我会失败..失败在下面的图像上。我该怎么办？我用的是摩卡咖啡和酶。

测试代码

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

Answer 1

您没有安装组件。您应该将组件作为参数传递给mount()。

const wrapper = mount();

应该是：

const wrapper = mount(<Header />);