Failing Jest unit testing

Question

I have a component in which I wrote test for. It worked great but now something is going wrong and I cannot figure out what.

This is the simple component which takes two numbers and returns their sum:

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;

And this is the test which used to work great:

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

This is the error that I get:

 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,

What's going on here? I have tried several things but nothing helped so far.

Answer 1

To make your test run I had to add this in package.json :

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

And this in the test:

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

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

The test then passed.

Note that I tested this in a CRA 2.1 environment. https://github.com/facebook/create-react-app

Answer 2

is your app compiling OK? do you have separate babel configs for app and tests?

i think Jest complains about the line utilizing field declarations syntax, which is stage-3 proposal right now.

Anyway, displayName is class property IIRC, so I think you should call it with static keyword, like this:

static displayName = Home.name;

Although I am not sure what this line is supposed to do, can you elaborate on that? you don't need to set displayName explicitly if you don't need it to be different than name inferred from class name