TypeError: Не удается прочитать свойство «contextTypes» неопределенного

Question

Я пытаюсь тестирования React-приложение с Шутки, я использую Фермент неглубокий, чтобы сделать мой App.js компонент в App-test-js, но я получаю эту ошибку: TypeError: Cannot read property 'contextTypes' of undefined

Это мой 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;

и Это мой 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); 
 

 
    }); 
 

 
});

И это ошибка, когда я бегу npm test:

Terminal screenshot

Это мой первый раз с тестированием в шутку, пожалуйста, может кто-то помочь мне с какой-либо идеей об этой ошибке ?

Answer 1

Проблема здесь состоит в том, что вы переосмысление компонент приложения с результатом неглубокой вызова

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

Решение будет использовать другое имя:

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

Answer 2

Это была бы такая же ошибка TypeError: Cannot read property 'contextTypes' of undefined, когда вы импортируете то, что не существует.

Вот пример:
AccountFormComponent.jsx (неверное имя класса):

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

Просто добавьте следующие строки в тестовый файл, чтобы убедиться, что компонент существует:

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

который печатает AssertionError: expected undefined to not equal undefined вместо

Answer 3

Как упомянутый @Ser может быть проблемой импорта. Если вы используете правила eslint это может дать вам подсказку, если какой-либо из импорта может не

"import/no-unresolved": 1, 

Я получил эту ошибку при попытке импортировать компонент из JSX файла

import {Header} from './Header'; 

эта неподвижная это

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

Кроме того, поскольку я использовал Webpack я понял, что я должен был добавить «.jsx» к варианту resolve.extensions.Таким образом, я могу игнорировать расширения при импорте.

Answer 4

В моем случае произошла ошибка при импорте модуля, который имеет только один экспорт по умолчанию, но я использовал один импорт.

Таким образом, вместо:

import { Foo } from './Foo' 

использование:

import Foo from './Foo' 

где Foo имеет экспорт по умолчанию:

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