TypeError：运行 Jest 测试时无法将类作为函数调用答案

【问题标题】：TypeError: Cannot call a class as a function when running Jest testTypeError：运行 Jest 测试时无法将类作为函数调用
【发布时间】：2020-02-09 07:36:37
【问题描述】：

在使用 Jest 测试 React 组件的简单设置中，我在每次测试运行时都收到错误“TypeError: Cannot call a class as a function”，npm test

实际的 React 页面构建良好，并且没有错误地呈现。

我查看了与此错误相关的其他帖子，但似乎没有一个可以帮助解决此问题的帖子似乎是 Jest 特有的。

感谢任何可以提供帮助的人。

这是我的设置：

package.json

{
  "name": "test-bed",
  "main": "index.js",
  "dependencies": {
    "react": "^16.10.2",
    "react-dom": "^16.10.2"
  },
  "devDependencies": {
    "babel-jest": "^24.9.0",
    "jest": "^24.9.0",
    "react-test-renderer": "^16.10.2",
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "3.2.0",
    "webpack": "4.22.0",
    "webpack-cli": "3.1.2",
    "webpack-dev-server": "3.1.10"
  },
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production",
    "test": "jest"
  }
}

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import TestComponent from './components/TestComponent';

ReactDOM.render(<TestComponent />, document.getElementById('app'));

src/components/TestComponent.js

export default class TestComponent extends React.Component {

    render() {
        return (
            <p>I'm v0.0.1 of TestComponent</p>
        )
    }
}

__ 测试 __/test-component.snapshot.test.js

import React from 'react';
import renderer from 'react-test-renderer';

import TestComponent from '../src/components/TestComponent';

TestComponent('should display component version', () => {
    const comp = renderer.create(<TestComponent/>);
    let tree = comp.toJSON();
    expect(tree).toMatchSnapshot();
});

【问题讨论】：

您是否在您的 jest.config 中的 transform 属性下正确配置了 babel-jest？它应该看起来像这样： "transform": { "^.+\\.[t|j]sx?$": "babel-jest" },
我没有，但添加它并没有解决问题。无论如何谢谢@JayKariesch

标签： reactjs jestjs

【解决方案1】：

问题是这样的：

TestComponent('should display component version', () => {
    const comp = renderer.create(<TestComponent/>);
    let tree = comp.toJSON();
    expect(tree).toMatchSnapshot();
});

将其解释为您要调用 TestComponent() 函数

将其更改为：

describe('TestComponent', () => {
  it('should display component version', () => {
    const comp = renderer.create(<TestComponent/>);
    let tree = comp.toJSON();
    expect(tree).toMatchSnapshot();
  });
})

【讨论】：

谢谢杰克。那成功了。必须遵循一些过时（或只是不正确）的示例。非常感谢。