ошибка из-за объявления свойства класса - PullRequest
Новая
       45

ошибка из-за объявления свойства класса

0 голосов
/ 25 октября 2018

У меня есть компонент «Домой», где пользователь вставляет 2 цифры.При нажатии кнопки «Добавить» результат отображается на экране.

Вот как это выглядит: 

import React, { Component } from 'react';

export class Home extends 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) 
        });
    }

 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>
            </div>
        );
      }
    }

Несмотря на то, что, кажется, работает нормально, мне нужно проверить этокомпонент, и это тест, который у меня есть: 

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

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/source/repos/WebApplication1/WebApplication1/ClientApp/src/App.js: Unexpected token (9:14)

  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:
     7 |
     8 | export default class App extends Component {
  >  9 |   displayName = App.name
       |               ^
    10 |
    11 |   render() {
    12 |     return (

Я скачал фермент и все необходимые зависимости ..

И это package.json: 

{
  "name": "WebApplication1",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "babel-jest": "^23.6.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "bootstrap": "^3.3.7",
    "jest": "^23.6.0",
    "react": "^16.0.0",
    "react-bootstrap": "^0.31.5",
    "react-dom": "^16.0.0",
    "react-router-bootstrap": "^0.24.4",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.17",
    "react-test-renderer": "^16.6.0",
    "rimraf": "^2.6.2"
  },
  "scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.6.0"
  }
}

Я не понимаю, почему, когда я запускаю тест на компоненте Home, это указывает на проблему в App.js

Какие-нибудь решения для этого?

Заранее спасибо

...