Enzymtest erreichen Komponente, geben Fehler

Question

Ich habe die folgende Reaktion Komponente, die ich versuche, Einheitstest mit Enzym und Scherz.

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 ist wie folgt

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

jedoch, wenn ich das Gerät zu testen ich folgende Fehler

TypeError: Cannot read property 'debounceTime' of undefined 

Wenn ich alles in der componentDidMount Kommentar raus laufen dann bekomme ich der folgende Fehler

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

Gibt es einige zusätzliche Einstellungen, die ich tun muss, um das zu erreichen?

Answer 1

Ich denke, dein Problem ist zweifach.

Zuerst würde ich überprüfen, dass onSearch $ wirklich existiert und tut, was Sie in Ihren Tests erwarten. Ich habe das Gefühl, dass dort etwas nicht richtig definiert wird.

In Bezug auf die zweite Frage, das ist ein häufiger Fehler, den Menschen bei der Verwendung von Enzym machen.

expect(...).to.be(...) ist eine Syntax von Enzym verwendet (die Chai ist), Jest eine andere verwendet

Sie Bibliothek Erwarten Sie hier die Unterschiede sehen:
http://chaijs.com/api/bdd/
https://facebook.github.io/jest/docs/expect.html

so expect(...).to nicht definiert ist, also to.equal ruft equal auf undefined auf. ändere es zu expect(...).toEqual(...) und du solltest in Ordnung sein