web-dev-qa-db-ja.com

TypeError：未定義のプロパティ 'contextTypes'を読み取れません

JestでReact-appをテストしようとしています。Enzymeのシャローを使用して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を実行したときのエラーです：

端末のスクリーンショット

Jestでテストするのは初めてですか、誰かがこのエラーについてのアイデアを教えてくれませんか？

unit-testingreactjsjestjsenzyme
13
Juan Camilo Hernández Moreno

ここでの問題は、浅い呼び出しの結果でアプリコンポーネントを再定義していることです。

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

解決策は、別の名前を使用することです。

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

これは同じエラーTypeError: Cannot read property 'contextTypes' of undefined when 存在しないものをインポートしている。

次に例を示します。
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代わりに

20
Ser

私の場合、デフォルトのエクスポートが1つしかないモジュールをインポートするとエラーが発生しましたが、単一のインポートを使用していました。

代わりに：

import { Foo } from './Foo'

使用する：

import Foo from './Foo'

fooにはデフォルトのエクスポートがあります：

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

@Serが述べたように、インポートの問題になる可能性があります。 eslintルールを使用している場合、これはインポートのいずれかが失敗する可能性がある場合にヒントを与える可能性があります

"import/no-unresolved": 1,

Jsxファイルからコンポーネントをインポートしようとするとエラーが発生しました

import {Header} from './Header';

これはそれを修正しました

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

また、webpackを使用したため、resolve.extensionsオプションに「.jsx」を追加する必要があることに気付きました。この方法で、インポート時に拡張機能を無視できます。

1
stefan