Неудачный шутник юнит-тестирование

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 для приложения и тестов?

Я думаю, что Джест жалуется на строку, использующую синтаксис объявлений полей, которая сейчас является предложением стадии 3.

В любом случае, displayName - это свойство класса IIRC, поэтому я думаю, что вы должны называть его ключевым словом static, например:

static displayName = Home.name;

Хотя я не уверен, что должна делать эта строка, не могли бы вы уточнить это? вам не нужно явно указывать displayName, если вам не нужно, чтобы он отличался от имени, выведенного из имени класса