CODEWITHSUNDEEP
javascriptreactjsbabeljsjestjsbabel-jest
Jeffpowrs
Jeffpowrs

Reputation: 4550

Jest tests crashing due to ES6/Es.next Syntax

I'm trying to do some simple snapshot testing with jest and enzyme—moving to react-testing-library—for some react components that I am building.

When I run my tests the output contains a number of errors pointing to ES6/7 class properties.

My assumption was that I was missing babel-jest. I have followed the instructions to set that up but I am still receiving a number of errors from different components referring to a missing the babel transform...

See below:

Example Test:

import React from 'react';
import { render } from 'react-testing-library';
import HRWrapper from '.';

test('<HRWrapper> snapshot', () => {
  const { container } = render(<HRWrapper>P.Body AaBbCc</HRWrapper>);
  expect(container.firstChild).toMatchSnapshot();
});

Example Error:

  ● Test suite failed to run

.../packages/Tooltip/src/index.js: Missing class properties transform.

    126 |
    127 | class ToolTip extends React.Component {
  > 128 |   state = {
        |   ^
    129 |     active: false,
    130 |     style: {}
    131 |   }

Here is my configuration:

package.json:

{
...
  "scripts": {
    "postinstall": "npm run bootstrap",
    "bootstrap": "lerna bootstrap",
    "build": "lerna exec -- node ../../scripts/build.js",
    "clean": "lerna clean",
    "predev": "npm run alias",
    "dev": "NODE_ENV=development start-storybook -p 9001 -c .storybook",
    "docs": "for f in packages/*; do react-doc-generator $f/src -o $f/docs/README.md -e [*.story.js]; done",
    "publish": "lerna --no-verify-registry publish",
    "start": "npm run dev",
    "test": "jest --json --outputFile=.jest-test-results.json",
    "test:update": "jest --updateSnapshot",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "lint": "eslint .",
    "fix": "eslint --fix",
    "alias": "node scripts/alias.js"
  },
  "repository": {
    "type": "git",
    ...

.babelrc:

{
  "presets": [
    "stage-1",
    "react",
    [
      "env",
      {
        "modules": false
      }
    ]
  ],
  "plugins": ["transform-class-properties"],
  "env": {
    "test": {
      "presets": ["env", "react"],
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

jest.config.js:

module.exports = {
  "setupTestFrameworkScriptFile": "<rootDir>/config/setup-test.js",
  "moduleNameMapper": {
    [`@myLibrary/(.*)$`]: "<rootDir>/packages/$1/src"
  },
  "transform": {
    "^.+\\.jsx?$": "babel-jest"
  },
};

setup-test.js:

// this is the jest setupTestFrameworkScriptFile

/*
* use mocked classNames instead of unique hashed className generated by
* styled-components for snapshot testing
*/

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import 'jest-styled-components';

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

// here we set up a fake localStorage because jsdom doesn't support it
// https://github.com/tmpvar/jsdom/issues/1137
if (!window.localStorage) {
  window.localStorage = {};
  Object.assign(window.localStorage, {
    removeItem: function removeItem(key) {
      delete this[key];
    }.bind(window.localStorage),
    setItem: function setItem(key, val) {
      this[key] = String(val);
    }.bind(window.localStorage),
    getItem: function getItem(key) {
      return this[key];
    }.bind(window.localStorage),
  });
}

Upvotes: 1

Views: 2239

Answers (2)

Jeffpowrs
Jeffpowrs

Reputation: 4550

My colleague spotted the issue, one of those obvious ones staring me in the face...

transform-class-properties was missing from the plugins in my test environment configuration in my .babelrc.

I made the following changes and it now works properly.

.babelrc:

{
  "presets": [
    "stage-1",
    "react",
    [
      "env",
      {
        "modules": false
      }
    ]
  ],
  "plugins": ["transform-class-properties"],
  "env": {
    "test": {
      "presets": ["env", "react"],
      "plugins": ["transform-class-properties", "transform-es2015-modules-commonjs"]
    }
  }

Upvotes: 0

Magnum
Magnum

Reputation: 2395

It's possible you also need stage-2 or stage-0.

See: https://github.com/tc39/proposals

Also remember that plugins are applied BEFORE presets, and presets are applied in order of last to first.

Upvotes: 1

Related Questions