Jest обнаружил неожиданный токен - при написании Jest-теста для AceEditor - PullRequest
Новая
       7

Jest обнаружил неожиданный токен - при написании Jest-теста для AceEditor

0 голосов
/ 09 апреля 2019

При создании Gutenberg-блока для WordPress, Я написал простой шутник: 

const cssInspector = require ('../src/controls/custom-css')

  console.log("Testinig Custom CSS")

test('Adding 1 + 1 equals 2', () => {
    expect(2).toBe(2)
  })

Ошибка при запуске теста:

Не удалось запустить тестовый набор

Шут встретил неожиданный токен 

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

SyntaxError: /Users/username/Local Sites/beansdev/app/public/wp-content/plugins/beanblocks/src/controls/custom-css/index.js: Unexpected token (123:12)

  121 | 
  122 |         return (
> 123 |             <AceEditor
      |             ^
  124 |                 value={cssInspectorText}
  125 |                 mode="css"
  126 |                 theme="github"

Пользовательский файл CSS имеет следующие параметры: 

const AceEditor = require('react-ace')
const { Component } = wp.element;

И в package.json есть следующее 

{
  "name": "test-blocks",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "cgb-scripts start",
    "build": "cgb-scripts build",
    "eject": "cgb-scripts eject",
    "test": "jest"
  },
  "jest": {
    "transformIgnorePatterns": [
      "<rootDir>/node_modules/(?!.*)"
    ]
  },
  "dependencies": {
    "@wordpress/compose": "^3.2.0",
    "babel-jest": "^24.7.1",
    "brace": "^0.11.1",
    "cgb-scripts": "1.15.0",
    "classnames": "^2.2.6",
    "css-selector-extract": "^4.0.0",
    "eslint-config-wordpress": "^2.0.0",
    "lodash": "^4.17.11",
    "memize": "^1.0.5",
    "postcss-discard-empty": "^4.0.1",
    "postcss-discard-unused": "^4.0.1",
    "re-resizable": "^4.11.0",
    "react-ace": "^6.4.0",
    "react-inlinesvg": "^0.8.4"
  },
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@wordpress/jest-preset-default": "^4.0.0",
    "clean-css": "^4.2.1",
    "cssnano": "^4.1.10",
    "jest": "^24.7.1"
  }
}

Мысли? Я добавляю дополнительные комментарии здесь, чтобы соответствовать рекомендациям по переполнению стека (требуется больше текста)

...