web-dev-qa-db-fra.com

TypeError: Impossible de lire la propriété 'contextTypes' de indéfini

J'essaie de tester une application React avec Jest, j'utilise peu profond d'Enzyme pour rendre mon App.js composant dans App-test-js mais j'obtiens cette erreur: TypeError: Cannot read property 'contextTypes' of undefined

C'est mon 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;

et c'est mon 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);

  });

});

Et voici l'erreur quand je lance npm test:

Capture d'écran du terminal

Est ma première fois avec des tests en plaisantant, s'il vous plaît quelqu'un pourrait-il m'aider avec une idée de cette erreur?

unit-testingreactjsjestjsenzyme
13
Juan Camilo Hernández Moreno

Le problème ici est que vous redéfinissez le composant d'application avec le résultat de l'appel superficiel

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

La solution serait d'utiliser un nom différent:

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

Ce serait la même erreur TypeError: Cannot read property 'contextTypes' of undefined lorsque vous importez quelque chose qui n'existe pas.

Voici un exemple:
AccountFormComponent.jsx (nom de classe incorrect):

export class FoeFormComponent extends React.Component { .... }

AccountFormComponent.test.jsx:

import { shallow } from 'enzyme'
import { expect, assert } from 'chai'
import { AccountFormComponent } from '../../src/components/AccountFormComponent

describe('', function () {
  it('', function () {
    const enzymeWrapper = shallow(<AccountFormComponent {...props} />)
  })  
})

Ajoutez simplement ce qui suit à votre fichier de test pour être sûr que le composant existe:

it('should exists', function () {
    assert.isDefined(AccountFormComponent)
})

qui imprime AssertionError: expected undefined to not equal undefined au lieu

20
Ser

Dans mon cas, l'erreur s'est produite lors de l'importation d'un module qui n'a qu'une seule exportation par défaut, mais j'utilisais une seule importation.

Donc au lieu de:

import { Foo } from './Foo'

utilisation:

import Foo from './Foo'

où Foo a l'exportation par défaut:

class Foo extends Component {
  render() {
   return (<div>foo</div>)
  }
}
export default Foo;
6
Laszlo

Comme mentionné @Ser pourrait être un problème d'importation. Si vous utilisez des règles eslint, cela pourrait vous donner un indice si l'une des importations échoue

"import/no-unresolved": 1,

J'ai eu cette erreur en essayant d'importer un composant à partir d'un fichier jsx

import {Header} from './Header';

cela l'a corrigé

import {Header} from './Header.jsx';

Aussi parce que j'ai utilisé webpack, j'ai réalisé que j'aurais dû ajouter '.jsx' à l'option resolv.extensions. De cette façon, je peux ignorer les extensions lors de l'importation.

1
stefan