Unable to run jest test case

Question

I have written a small test case to test a ThankYouPage component which looks like below

import ToggleDisplay from 'react-toggle-display';
import styles from '../styles.css';

function ThankYouPage(props) {
  return (
    <ToggleDisplay show={props.show}>
      <div className={styles.thankyouText}> Thank you!</div>
      <div className={styles.helpText}>
        The more you thanks, the better.
      </div>
    </ToggleDisplay>
  );
}

export default ThankYouPage;

Following is the test case in jest -

import React from 'react';
import ThankYouPage from './components/thank-you-page';
import { shallow } from 'enzyme';


describe('<ThankYouPage />', () => {
  it('renders 1 ThankYouPage component', () => {
    const component = shallow(<ThankYouPage show=true />);
    expect(component).toHaveLength(1);
  });
});

Following is the trace on console I get after running npm test

> myreactapp@1.0.0 test /Users/rahul/myreactapp
> jest

 FAIL  tests/thank-you-page.test.js
  ● Test suite failed to run

    /Users/cominventor/myreactapp/tests/thank-you-page.test.js: Unexpected token (8:30)
         6 | describe('<ThankYouPage />', () => {
         7 |   it('renders 1 ThankYouPage component', () => {
      >  8 |     const component = shallow(<ThankYouPage show=true />);
           |                               ^
         9 |     expect(component).toHaveLength(1);
        10 |   });
        11 | });

Am I missing a dependency to interpret jsx within shallow? Following is how my deps look like

"devDependencies": {
    "babel-jest": "^22.4.3",
    "oc-template-react-compiler": "5.0.2",
    "prettier": "^1.10.2",
    "prettier-eslint": "^8.8.1"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "enzyme": "^3.3.0",
    "jest": "^22.4.3",
    "jsdom": "^11.10.0",
    "querystring": "^0.2.0",
    "react-cookie": "^2.1.4",
    "react-scripts": "^1.1.4",
    "react-toggle-display": "^2.2.0"
  }

Possible duplicate of [Jest not preprocessing my JSX](https://stackoverflow.com/questions/33958757/jest-not-preprocessing-my-jsx) — Håken Lid, May 11 '18 at 10:46

score 0 · Accepted Answer · edited Jun 19 '18 at 06:47

0

try installing

npm i --save-dev enzyme enzyme-adapter-react-16

Add transform-class-properties to .babelrc file like below -

"plugins": [
    "transform-class-properties"
  ]

Add following to top level in package.json

"jest": {
    "moduleNameMapper": {
      "\\.(css)$": "jest-css-modules"
    }

Following unit test should then work fine.

import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import ThankYouPage from './components/thank-you-page';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });

describe('<ThankYouPage />', () => {
  it('renders 1 ThankYouPage component', () => {
    const component = shallow(<ThankYouPage show=true />);
    expect(component).toHaveLength(1);
  });
});

edited Jun 19 '18 at 06:47

comiventor

3,922
5
50
77

answered May 11 '18 at 10:43

Yaswanth

58
2
10

Enzyme.configure didn't work for me but just configure did. Also, I had to make changes to babelrc using the thread suggested by Håken Lid. What remains is to get jest process `import styles from '../styles.css';` . I tried installing jest-css-modules but seems I need some babel setting to get it work – comiventor May 13 '18 at 13:19
what solved the css problem was including jest-css-modules – comiventor May 13 '18 at 13:36
I would suggest you to complete the answer by including the above. I think without the css suggestion, the answer would not be complete. – comiventor May 13 '18 at 13:37
if it is a problem with css you have to include these lines in package.json "jest": { "transform": { ".*": "/node_modules/babel-jest" }, "moduleNameMapper": { "\\.(css|scss)$": "/node_modules/jest-css-modules" } } – Yaswanth May 15 '18 at 11:20

score 0 · Answer 2 · answered May 11 '18 at 10:47

0

try this:

    import * as React from 'react';
    import * as Adapter from 'enzyme-adapter-react-16';
    import {shallow, configure} from 'enzyme';
    import ThankYouPage from './components/thank-you-page';

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

   describe('my test', () => {
     ...
     ...
   });

install enzyme-adapter-react-16 package from npm.

answered May 11 '18 at 10:47

GAJESH PANIGRAHI

1,204
10
17

also, based on my experience with other languages, the idea of import * as React looks bit bad. I think we should only import what's needed. Watsay? – comiventor May 13 '18 at 21:16

score 0 · Answer 3 · answered May 11 '18 at 10:49

0

You are importing enzyme in wrong way ( not relative path ), try import { shallow } from 'enzyme';

answered May 11 '18 at 10:49

1

thanks @krystian-sztadhaus. that was helpful but it didn't fix the issue :( – comiventor May 13 '18 at 10:04

Unable to run jest test case

3 Answers3