Question

我正在尝试使用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时的错误：

Terminal screenshot

我是第一次开玩笑测试，有人可以帮我解决这个错误吗？

Answer 1

这里的问题是你正在用浅调用的结果重新定义app组件

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

在我的情况下，导入一个只有一个默认导出的模块时发生了错误，但我使用的是单个导入。

所以而不是：

import { Foo } from './Foo'

使用：

import Foo from './Foo'

Foo有默认导出：

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

Answer 4

正如提到的@Ser可能是一个导入问题。如果您使用的是eslint规则，如果任何导入可能失败，这可能会给您一个提示

arr[0]

我在尝试从jsx文件导入组件时遇到了错误

"import/no-unresolved": 1,

这解决了它

import {Header} from './Header';

另外因为我使用了webpack，我意识到我应该添加＆＃39; .jsx＆＃39;解析.extensions选项。这样我可以在导入时忽略扩展名。

Answer 5

就我而言，我正在导入具有命名组件语法的默认组件。

例如，类似：

import {TestComponent} from "../../components/TestComponent";

代替

import TestComponent from "../../components/TestComponent";

更新导入以使用正确的语法解决了该问题。虽然很傻。

TypeError：无法读取未定义的属性“contextTypes”

5 个答案: