Question

我有一个要为其编写测试的组件。效果很好，但现在出了点问题，我无法弄清楚是什么。

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

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,

这是怎么回事？我已经尝试了几件事，但到目前为止没有任何帮助。

Answer 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

Answer 2

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

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

无论如何，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

Jest单元测试失败

2 个答案: