SyntaxError: Неожиданный импорт токена - Jest - PullRequest
Новая
       27

SyntaxError: Неожиданный импорт токена - Jest

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

Привет. Я пытаюсь настроить скелетный проект веб-компонентов с hyperhtml и jest и получаю следующую ошибку при выполнении тестовых примеров. 

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

Попробовал все существующие предложения в stackoverflow для решения проблемы, ноудачи.

Ниже приведены мои конфигурации

.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"
  }

Вы можете найти код в следующем репо.https://github.com/balajiram/webcomponent-elements-app

1 Ответ

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

Если я правильно прочитал "modules": "commonjs" в предустановленной конфигурации test, это означает, что вы должны хотя бы попробовать следующее: 

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

Вы также используете Babel 6 вместо 7, где 7 - этолучше специально для классов и встроенных / встроенных расширений, таких как пользовательские элементы.

Если вам не нужен Shadow DOM (проблемный, медленный, тяжелый), я предлагаю вам использовать наиболее развернутый полифилл для пользовательских элементов. document-register-element , производственный выбор в эти годы для AFrame, Google AMP и др.

И последнее, но не менее важное: этот вопрос больше похож на configuration один, так что и метки веб-компонентов, и гиперссылки здесь выглядят немного злоупотребленными / избыточными, поскольку они буквально не имеют никакого отношения к настройке среды тестирования.

Надеюсь, независимо от того,чтобы выяснить, в чем проблема, и что вы могли бы улучшить в целом в своем проекте.

...