Enzyme testing reach component, giving error

Question

I have the following react component which I am trying to unit test using enzyme and jest.

import React from 'react';
import { Subject } from 'rxjs/Subject';
import { connect } from 'react-redux';
import styles from './IncrementalSearch.scss';
import { performIncrementalStoreSearch } from './IncrementalSearchActions';

export class IncrementalSearch extends React.Component {

constructor(props) {
    console.log('constructor');
    super(props);
    this.onSearch$ = new Subject();
    this.onChange = this.onChange.bind(this);
}

componentDidMount() {
    this.subscription = this.onSearch$
        .debounceTime(300)
        .subscribe(debounced => {
            this.props.onPerformIncrementalSearch(debounced);
        });
}


componentWillUnmount() {
    if (this.subscription) {
        this.subscription.unsubscribe();
    }
}
onChange(e) {
    const newText = e.target.value;
    this.onSearch$.next(newText);
}

render() {
    return (
        <div className={styles.srchBoxContaner}>
            <input
                className={styles.incSrchTextBox}
                type="text" name="search" placeholder="Search.."
                onChange={this.onChange}
            />
        </div>
    );
}
}

const mapDispatchToProps = (dispatch) => ({
    onPerformIncrementalSearch: (searchText) => {
        dispatch(performIncrementalStoreSearch(searchText));
    }
});

const IncrementalSearchComponent = connect(null, mapDispatchToProps)(IncrementalSearch);
export default IncrementalSearchComponent;

My unit test is as follows

import React from 'react';
import { mount } from 'enzyme';
import sinon from 'sinon';
import { IncrementalSearch } from './IncrementalSearch';

describe('<IncrementalSearch />', () => {
    it('calls componentDidMount', () => {
        sinon.spy(IncrementalSearch.prototype, 'componentDidMount');
        const wrapper = mount(<IncrementalSearch />);
        expect(IncrementalSearch.prototype.constructor.calledOnce).to.equal(true);
    });
});

However when I run the unit test I get the following error

 TypeError: Cannot read property 'debounceTime' of undefined

If I comment out everything in the componentDidMount then I get the following error

<IncrementalSearch /> › calls componentDidMount

    TypeError: Cannot read property 'equal' of undefined

      at Object.<anonymous> (src/components/common/incrementalSearch/IncrementalSearch.test.js:10:89)
      at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
      at process._tickCallback (internal/process/next_tick.js:103:7)

  <IncrementalSearch />
    × calls componentDidMount (29ms)

Is there some additional setup which I need to do in order to get this running?

score 0 · Answer 1 · answered Jun 30 '17 at 06:49

0

I think your problem is two fold.

First I'd verify that onSearch$ really exists and does what you expect in your tests. I have a feeling something is not being defined properly there.

Regarding the 2nd issue, That's a common mistake people make when using enzyme.

expect(...).to.be(...) is a syntax used by Enzyme(which is Chai), Jest uses a different Expect library

You can see the differences here :
http://chaijs.com/api/bdd/
https://facebook.github.io/jest/docs/expect.html

so expect(...).to is undefined, hence to.equal is calling equal on undefined. change it to expect(...).toEqual(...) and you should be fine

answered Jun 30 '17 at 06:49

Patrick

3,289
2
18
31

I'm a bit confused here, Jest is the test runner? Enzyme is the assertion library? Assuming this is true, if I am using Enzyme then I have to use the Chai syntax right? – tmp dev Jun 30 '17 at 23:05
You can use enzyme with Mocha and chai, you don't have to use Jest. Jest simply packs everything together, adds istanbul for coverage and removes all the required configs. Jest by default has a different Expect library. you can use Chai if you want( I think, never tried it..), but Jest's Expect should be enough – Patrick Jul 01 '17 at 08:59
I checked the firstIssue on debounceTime. OnSearch$ actually exists, however debounceTime does not exist, how can this be, shouldn't this be a method of the Subject? – tmp dev Jul 04 '17 at 03:06
I never used RX so I can't really say – Patrick Jul 06 '17 at 07:14

Enzyme testing reach component, giving error

1 Answers1