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

Posted 2023-02-21

【中文标题】TypeError：无法读取未定义的属性“contextTypes”

【英文标题】：TypeError: Cannot read property 'contextTypes' of undefined

【发布时间】：2017-02-09 07:11:54

【问题描述】：

我正在尝试使用 Jest 测试一个 React 应用程序。我使用酶的浅层在App-test-js 中渲染我的App.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

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

【问题讨论】：

你能找出contextType用在哪里吗，我在你的sn-p中找不到contextType，你需要做的就是定义调用contextType的对象。

【参考方案1】：

当您正在导入不存在的东西时，这将是相同的错误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

【讨论】：

这对我来说是个问题。我不小心通过解构导入，认为导出是正常的，而不是export default。不得不将：import MyComponent from './index' 更改为：import MyComponent from './index'

这是一个完美的答案，不幸的是一些语法/linting 工具无法捕捉到这种错误。

感谢您的回答。我和@Brendan 有同样的问题，假设export default + import Name 而不是实际的export const + import Name 。

当我将类组件转换为带有钩子的函数时，我忘记了导出。我想很多人可能会犯同样的错误。谢谢。

【参考方案2】：

在我的例子中，我使用命名组件语法导入默认组件。

例如：

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

而不是

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

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

【参考方案3】：

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

所以代替：

import  Foo  from './Foo'

使用：

import Foo from './Foo'

其中 Foo 具有默认导出：

class Foo extends Component 
  render() 
   return (<div>foo</div>)
  

export default Foo;

【参考方案4】：

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

"import/no-unresolved": 1,

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

import Header from './Header';

这解决了它

import Header from './Header.jsx';

另外，因为我使用了 webpack，我意识到我应该在 resolve.extensions 选项中添加 '.jsx'。这样我可以在导入时忽略扩展。

【参考方案5】：

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

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

解决方案是使用不同的名称：

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

【讨论】：

使用const wrapper = shallow(<App />); 总是很好，因为shallow() 的返回是一个浅包装。