SyntaxError: Unexpected token import - Jest

Question

Hi I am trying setup web components skeleton project with hyperhtml and jest and getting following error while running test cases

import {Component, bind, define, hyper, wire} from 'hyperhtml/esm';
    ^^^^^^
SyntaxError: Unexpected token import

Tried all existing suggestion in stackoverflow for the issue, but no-luck.

Below are my configurations

.babelrc.json

{
"env": {
    "production": {
        "presets": [
            [
                "env", {
                    "targets": {
                        "browsers": ["last 2 Chrome versions", "last 2 Firefox versions", "last 2 Edge versions", "last 2 Safari versions", "ie 11"]
                    },
                    "modules": false,
                    "useBuiltIns": true
                }
            ]
        ],
        "plugins": [
            "transform-object-rest-spread",
            [
                "babel-plugin-transform-builtin-classes", {
                    "globals": ["HTMLElement"]
                }
            ]
        ]
    },
    "test": {
        "presets": [
            ["env", {
                "targets" : { "node" : "current" },
                "modules": "commonjs",
                "debug": false,
                "useBuiltIns": "usage"
            }],
            "stage-0",
            "jest"
        ],
        "plugins": [
            "transform-object-rest-spread",
            "transform-es2015-modules-commonjs",
            [ "babel-plugin-transform-builtin-classes", { "globals": ["HTMLElement"] } ]
        ]
    }
}

}

jest.config.js

module.exports = {
    verbose: true,
    collectCoverageFrom: [
        './src/**/*.{js,jsx}',
        '!**/_tests/**',
        '!**/node_modules/**'
    ],
    testMatch: ['**/_tests/**/*.js'],
    testPathIgnorePatterns: [
        '<rootDir>/node_modules/',
        '<rootDir>/dist/',
        '<rootDir>/demo/',
        '<rootDir>/docs/'
    ],
    testURL: 'http://localhost/',
    moduleNameMapper: {
        '\\.(css)$': '<rootDir>/test-mocks/styles.js'
    },
    moduleDirectories: ["node_modules", "./src"],
    transform: {
        '^.+\\.(js?)$': 'babel-jest'
    }
};

package.json

"scripts": {
...
"test": "NODE_ENV=test jest --no-cache --config jest.config.js",
 ....
 }
"dependencies": {
    "hyperhtml": "2.10.1",
    "hyperhtml-element": "3.1.0",
    "babel-loader": "7.1.4",
    "babel-jest": "22.4.3"
  },
  "devDependencies": {
    "babel-core": "6.26.3",
    "babel-eslint": "8.2.3",
    "babel-preset-react": "^6.24.1",
    "babel-plugin-transform-builtin-classes": "0.6.1",
    "babel-plugin-transform-dynamic-import": "2.0.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "babel-plugin-transform-object-rest-spread": "6.26.0",
    "babel-polyfill": "6.26.0",
    "babel-preset-env": "1.7.0",
    "babel-preset-jest": "^23.2.0",
    "babel-preset-stage-0": "6.24.1",
    "basichtml": "0.16.0",
    "cssnano": "4.1.4",
    "eslint": "4.19.1",
    "eslint-config-airbnb": "17.1.0",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.2",
    "eslint-plugin-react": "7.11.1",
    "jest": "22.4.3",
    "jest-environment-node": "22.4.3",
    "jsdoc": "3.5.5",
    "live-server": "1.2.0",
    "minami": "1.2.3",
    "postcss": "7.0.5",
    "postcss-cssnext": "3.1.0",
    "postcss-custom-media": "7.0.6",
    "postcss-discard-comments": "4.0.1",
    "postcss-easy-import": "3.0.0",
    "postcss-loader": "3.0.0",
    "postcss-mixins": "6.2.0",
    "postcss-nesting": "7.0.0",
    "postcss-reporter": "6.0.0",
    "postcss-selector-not": "4.0.0",
    "prettier-eslint": "8.8.1",
    "sizzle": "2.3.3",
    "stylelint": "9.6.0",
    "stylelint-config-standard": "18.2.0",
    "text-loader": "0.0.1",
    "webpack": "4.8.3",
    "webpack-cli": "3.1.1",
    "webpack-dev-server": "3.1.4",
    "webpack-merge": "4.1.2"
  }

You can find the code in the following repo. https://github.com/balajiram/webcomponent-elements-app

Answer 1

If I read "modules": "commonjs" correctly under test preset configuration, it means you should at least try the following instead:

const {Component, bind, define, hyper, wire} = require('hyperhtml/cjs');

You are also using Babel 6 instead of 7, where 7 is better specially for classes and native/built-in extends such as Custom Elements.

If you don't need Shadow DOM (problematic, slow, heavy), I suggest you to use the most deployed polyfill for custom elements, which is document-register-element , the production choice in these years for AFrame, Google AMP, and others.

Last, but not least, this question seems more like a configuration one, so that both web-component and hyperhtml labels here look a bit abused/redundant, since these have literally nothing to do with how you configure your testing environment.

I hope, regardless, to have clarified what is the issue, and what you could improve in general in your project.