React components testing. Mocha, Enzyme tests. Errors

Question

I am using Mocha and Enzyme tests. Write test in React app at first time. Project is large, so I can't do this frm start. Tell me plz, do I need to add something in webpack.config file and what can I do with errors (below) "Cannot read property 'apply' of undefined" or "Cannot read 'type' of undefined"

Setup.js code:

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;

Test code:

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

  });
});

Just in case, code of my simple component:

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 './[email protected]';
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));

When I changed import Header from ../Header to 'import {Header} from ...' I get a new errors which on screen below

Ming Soon · Accepted Answer · 2017-02-19 13:02:43Z

1

I think the problem is that you are testing the HOC that requires the context from the parent component.

You can always export the pure component alongside the default wrapped component for testing.

Component.js

export class Header extends React.Component {
  ...
}
export default withStyles(s)(injectIntl(Header));

Test code

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

edited Feb 19, 2017 at 13:02

answered Feb 19, 2017 at 7:53

Ming Soon

1,0182 gold badges12 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Vladyslav Tereshyn Over a year ago

Im sorry, I edited my post with your code and get a new error. Can you look pls?

Ming Soon Over a year ago

@VladTeryoshin, the screenshot attached is so blurring, can you please send me an exact error message? As a side note, I am not sure why you have to use mount() instead of shallow() method for testing.

Vladyslav Tereshyn Over a year ago

I tried shallow, but got some errors and decided to try mount.

Vladyslav Tereshyn Over a year ago

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. thiis error I have got.

Vladyslav Tereshyn Over a year ago

If I change a component code(update in post) I have an other error: <Header /> Warning: Failed prop type: The prop intl is marked as required in Header, but its value is undefined. in Header 1) must have an img 0 passing (229ms) 1 failing 1) <Header /> must have an img: TypeError: Cannot read property 'formatMessage' of undefined

|

Collectives™ on Stack Overflow

React components testing. Mocha, Enzyme tests. Errors

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related