React JSX Question

TypeError: Cannot read property 'contextTypes' of undefined

I'm trying to testing a React-app with Jest, I use Enzyme's shallow to render my

App.js
component in
App-test-js
but I'm getting this error:
TypeError: Cannot read property 'contextTypes' of undefined


This is my
App.js
:



/* global google */
import React, { Component } from 'react';
import Geosuggest from 'react-geosuggest';
import { getAirQuality } from './Client'
import DataTable from './DataTable'
import Errors from 'react-errors'


class App extends Component {

.
.
.

render() {
return (
<div className="App">
<form onSubmit={this.searchAirQuality.bind(this)}>
<Geosuggest
placeholder="Type a location and press SEARCH button!"
onSuggestSelect={this.onSuggestSelect.bind(this)}
initialValue={this.state.place}
location={new google.maps.LatLng(53.558572, 9.9278215)}
radius="20"/>
<button className="my-button" type="submit" disabled={!this.state.place}>Button</button>
</form>
<DataTable items={this.state.items} />
<Errors
errors={this.state.errors}
onErrorClose={this.handleErrorClose}
/>
</div>
)
}
}

export default App;





and This is my
App-test.js
:



import React from 'react'
import { shallow } from 'enzyme'
import App from '../components/App.js'

describe( '<App />', () => {
it('Button disable when input is empty', () => {
const App = shallow(<App />);

expect(App.find('.my-button').hasClass('disabled')).to.equal(true);

});

});





And this the error when I run
npm test
:

Terminal screenshot

Is my first time with testing in jest, please could someone help me with any idea about this error?

Answer

The problem here is that you are redefining the the app component with the result of the shallow call

//    Redefining
//    ↓
const App = shallow(<App />);

The solution here is to use a different name:

//    Use a different name
//    ↓
const app = shallow(<App />);
Comments