Jest 单元测试失败答案

【问题标题】：Failing Jest unit testingJest 单元测试失败
【发布时间】：2018-11-01 14:27:05
【问题描述】：

我有一个组件，我在其中编写了测试。它工作得很好，但现在出了点问题，我不知道是什么。

这是一个简单的组件，它接受两个数字并返回它们的总和：

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { LogOutButton } from './LogOutButton.js';

class Home extends React.Component {
displayName = Home.name;

state = {
  result: 0,
  val1: 0,
  val2: 0,
};

handleChangeOne = event => {
  this.setState({ val1: event.target.value });
};

handleChangeTwo = event => {
  this.setState({ val2: event.target.value });
};

add = () => {
  this.setState({ 
    result: parseInt(this.state.val1) + parseInt(this.state.val2)
  });
};

onLogoutClick = () => {
  window.location.href = 'https://www.MICROSOFT.com';
}

render() {
  return (
    <div>
      <h1>Hello world! The result is: {this.state.result}</h1>
      <input type="text" onChange={this.handleChangeOne} />
      +
      <input type="text" onChange={this.handleChangeTwo} />
      = <br />
      <button onClick={this.add}>Add</button>
      <br/><br/> 
      <LogOutButton onLogout={this.onLogoutClick} /> 
    </div>
  );
}
}

  export default Home;

这是过去效果很好的测试：

import React from 'react';
import { shallow } from 'enzyme'
import ReactDOM from 'react-dom';
import App from './App';
import { Home } from './components/Home';

describe('Home />', () => {
  it('Renders a sum', () => {
      const home = shallow(<Home />);
      var first_value = home.state().val1;
      var second_value = home.state().val2;
      var result = first_value + second_value;
      expect(result).toBe(0);

      const inputs = home.find('input');
      inputs.at(0).simulate('change', {target: {value: 5} } );
      inputs.at(1).simulate('change', { target: { value: 8 } });
      home.find('button').simulate('click');
      home.update();
      expect(home.state().result).toBe(13);
  });
});

这是我得到的错误：

 FAIL  src/Home.test.js
  ● Test suite failed to run

C:/Users/Itay/Documents/Experiments/WebApplication1/WebApplication1/ClientApp/src/components/Home.js: Unexpected token (8:12)

  Jest encountered an unexpected token
  This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
  By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
  Here's what you can do:
   • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
   • If you need a custom transformation specify a "transform" option in your config.
   • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
  You'll find more details and examples of these config options in the docs:
  https://jestjs.io/docs/en/configuration.html
  Details:
     6 |
     7 | class Home extends React.Component {
  >  8 | displayName = Home.name;
       |             ^
     9 |
    10 |     state = {
    11 |       result: 0,

这里发生了什么？我已经尝试了几件事，但到目前为止没有任何帮助。

【问题讨论】：

您好，您是否尝试将 static 关键字添加到您的 displayName 属性中？

标签： javascript reactjs unit-testing jestjs

【解决方案1】：

为了让您的测试运行，我必须在 package.json 中添加它：

"enzyme-adapter-react-16": "1.6.0"

而这个在测试中：

import Enzyme, { shallow } from 'enzyme';
import Adapter from "enzyme-adapter-react-16";

Enzyme.configure({ adapter: new Adapter() });

然后测试通过了。

请注意，我在 CRA 2.1 环境中对此进行了测试。 https://github.com/facebook/create-react-app

【讨论】：

【解决方案2】：

您的应用程序编译正常吗？你有单独的应用和测试的 babel 配置吗？

我认为 Jest 抱怨使用字段声明语法的行，这是目前第 3 阶段的提案。

无论如何，displayName 是类属性 IIRC，所以我认为您应该使用 static 关键字调用它，如下所示：

static displayName = Home.name;

虽然我不确定这条线应该做什么，但你能详细说明一下吗？ you don't need to set displayName explicitly if you don't need it to be different than name inferred from class name

【讨论】：