SyntaxError: Unexpected token 'export'

137
31 января 2022, 09:00

подскажите как решить проблему с тестами мой основной js (activeBtnClick.js):

export default function activeButtonClick(button) {
 if (button.classList.contains('active')) {
  button.classList.remove('active');
 } else {
  button.classList.add('active');
 }
}

activeBtnClick.test.js - тест:

const activeButtonClick = require('./activeBtnClick');
describe("activeBtnClick", () => {
 const pencil = document.createElement('div');
 activeButtonClick(pencil);
 it("add class to the button", () => {
  expect(pencil.classList.contains('active')).toEqual(true);
 });
});

jest.config.js НЕТУ babel НЕ использую использую webpack package.json:

{
  "name": "simple-piskel-clone",
  "version": "1.0.0",
  "description": "Simple Piskel Clone",
  "main": "index.js",
  "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "build": "webpack",
   "watch": "webpack --watch",
   "test": "jest"
},
  "author": "",
  "license": "ISC",
  "devDependencies": {
   "css-loader": "^3.4.0",
   "eslint-loader": "^3.0.3",
   "html-webpack-plugin": "^3.2.0",
   "jest": "^24.9.0",
   "node-sass": "^4.13.0",
   "sass-loader": "^8.0.0",
   "style-loader": "^1.1.1",
   "url-loader": "^3.0.0",
   "webpack": "^4.41.4",
   "webpack-cli": "^3.3.10"
 },
 "dependencies": {
   "eslint": "^6.8.0",
   "eslint-config-airbnb-base": "^14.0.0",
   "eslint-plugin-import": "^2.19.1"
  }
}

ошибка:

Answer 1

Видимо, Jest без Babel не понимает ESM (import и export это синтаксис ECMAScript Modules) - тогда, в синтаксисе CommonJS будет так: 

module.exports = function activeButtonClick() {...}

const activeButtonClick = require('./activeBtnClick.js');
Answer 2

Для меня сработало вот так.

npx mocha --require ts-node/register --require esm src/**/*.spec.ts

Или package.json scripts (оба варианта работают, используйте тот который больше нравится):

"scripts": {
    "test": "mocha -r esm -r ts-node/register src/**/*.spec.ts",
    "test-ts": "ts-mocha -r esm -p tsconfig.json src/**/*.spec.ts"
}

Главное не забыть добавить esm в devDependencies:

npm install --save-dev esm

Чтобы в package.json было

"devDependencies": {
    "esm": "^3.2.25"
}

Если использовать ts-mocha то её так же нужно добавить в package.json.

READ ALSO
Проблема с калькулятором вообще ничего не выводит
javascript

Проблема с калькулятором вообще ничего не выводит

Написал калькулятор на js, if else он вообще ничего не выводит писал в браузере так что подключать js с css не надо

 78
В какой примитив будет преобразован объект `Date` при передаче в качестве аргумента: `new Date(new Date())`?
javascript

В какой примитив будет преобразован объект `Date` при передаче в качестве аргумента: `new Date(new Date())`?

В какой примитив будет преобразован объект Date при передаче в качестве аргумента: new Date(new Date())?

 207
Динамическая смена ширины iframe в зависимости от VW
javascript

Динамическая смена ширины iframe в зависимости от VW

С помощью js добился подгонки iframe по ширине экранаТеперь вопрос следующий:можно ли адаптировать мои "костыли" чтобы при смене размера viewport...

 89
Checkbox для выбора всех элементов списка (checkbox'ов) используя react hooks
javascript

Checkbox для выбора всех элементов списка (checkbox'ов) используя react hooks

Проблема в том, что checkbox под номером 1 не выделяется, если повторить такие шаги:

 79