Jest: «Синтаксическая ошибка: недопустимый или неожиданный токен» с .png

Проверьте http://facebook.github.io/jest/docs/tutorial-webpack.html#content

РЕДАКТИРОВАТЬ: новая ссылка https://jestjs.io/docs/en/webpack

@matheusml ты вообще это решил? @cpojer Я могу подтвердить, что у меня тоже есть эта проблема. У меня есть статические активы вне моего источника. т.е. моя структура каталогов выглядит так:

|-fonts
|-img
\_styles
src
|-components
|-pages
...

Моя конфигурация шутки похожа на пример, приведенный в ссылке:

"jest": {
    "collectCoverageFrom": [ "src/**/*.{js,jsx}" ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "tests/__mocks__/fileMock.js"
    }
  }

Мой тест терпит неудачу, когда он пытается импортировать изображение:

import thumbnail from 'img/thumbnail.png'

Я думаю, важно отметить, что если я не включу каталог public в moduleDirectories , я получу ошибку: Cannot find module 'img/thumbnail.png' from 'MyModule.js'

Ожидается ли это? Должен ли он действительно проверять наличие события импорта, хотя сопоставление модуля уже настроено? В противном случае я получаю ту же ошибку, что и выше. Я не пробовал какой-либо другой тип импорта в сопоставлении имен.

Я столкнулся с той же проблемой, я пытаюсь реализовать рендеринг сервера reactjs. Любое исправление для этого.

Я поместил это в свой babelrc, и, похоже, все работает:

{
"пресеты": ["es2015", "реагировать"]
}

Ошибка того же типа

SyntaxError: Unexpected token <
      /media/sibin/F_WORK/<path>/<icon-name>.svg:1
      ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<?xml version="1.0" encoding="UTF-8"?>
                                                                                               ^
      SyntaxError: Unexpected token <

Кажется, у меня тоже есть эта проблема. Это происходит только тогда, когда мне требуется png.

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){�PNG
                                                                                             ^
    SyntaxError: Invalid or unexpected token

Так же ошибка. Кто-то исправляет это?

Та же ошибка с .mp3, ничего не помогает

Подобные ошибки также могут быть результатом использования предустановки с абсолютными путями, установленными, например, в сопоставлении имен модулей. Однако этот случай будет исправлен в следующем выпуске.

У меня была такая же ошибка, и я решил ее, создав assetsTransformer.js :

const path = require('path');

module.exports = {
  process(src, filename, config, options) {
    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
  },
};

Затем добавьте это в конфигурацию jest в package.json:
"jest": { "moduleNameMapper": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/assetsTransformer.js", "\\.(css|less)$": "<rootDir>/assetsTransformer.js" } },

Источник: https://facebook.github.io/jest/docs/webpack.html#content

В моем случае я не понимал, что <rootDir> — это токен, предоставленный Jest, и предположил, что мне нужно его заменить. Добавление его к записям moduleNameMapper решило проблему.

Я добавил assetTransformer.js , упомянутый @bombellos. Также следуйте инструкциям по использованию с webpack . Но я все еще получаю те же ошибки.

PNG:

 FAIL  components/__tests__/List.js
  ● Test suite failed to run

    /assets/images/logo-header.png:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){�PNG
                                                                                             ^

    SyntaxError: Invalid or unexpected token

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
      at Object.<anonymous> (components/PageHeader.js:15:19)
      at Object.<anonymous> (components/Main.js:10:436)

SVG:

 FAIL  ui/Button/__tests__/snapshot.test.js
  ● fixture 'TextAndIcon' snapshots are rendered correctly

    /assets/icons/fontawesome/regular.svg:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                                                                                             ^

    SyntaxError: Unexpected token <

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
      at Icon (ui/Icon.js:31:17)
      at resolve (node_modules/react-dom/cjs/react-dom-server.node.development.js:2599:14)
      at ReactDOMServerRenderer.render (node_modules/react-dom/cjs/react-dom-server.node.development.js:2746:22)
      at ReactDOMServerRenderer.read (node_modules/react-dom/cjs/react-dom-server.node.development.js:2722:19)
      at Object.renderToStaticMarkup (node_modules/react-dom/cjs/react-dom-server.node.development.js:2991:25)

Моя структура папок в основном:

<rootDir>
  assets
    *.png, *.svg, ...
  components
    *.js
  ui
    *.js

По-видимому, файлы все еще загружаются, а не издеваются, но я понятия не имею, как это отлаживать.

.babelrc:

{
  "presets": [
    ["es2015", {"modules": false}],
    "react",
    "stage-1",
    ["env", {
      "targets": {
        "browsers": [
          "last 3 versions",
          "> 1%",
          "Firefox ESR",
          "iOS 9"
        ]
      }
    }]

  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-class-properties",
    "transform-react-jsx-source",
    "glamorous-displayname",
    "wildcard"
  ],
  "env": {
    "development": {
      "plugins": [
        ["transform-runtime", {
          "polyfill": true
        }]
      ]
    },
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

пакет.json:

  "jest": {
    "snapshotSerializers": [
      "jest-glamor-react",
      "enzyme-to-json/serializer"
    ],
    "moduleFileExtensions": ["js"],
    "moduleDirectories": ["node_modules"],
    "transform": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/assetsTransformer.js"
    }
  },

Я тупой, у меня был еще один jest.config.js в моей корневой папке, который перезаписал настройки в package.json . Хотя он еще не запущен, я больше не получаю эту конкретную ошибку.

Получил это работает. Вот важные моменты (обратите внимание, что у меня есть дополнительная конфигурация из-за фермента 3 с реакцией 16):

.babelrc

{
  "presets": [
    "es2015",
    "react",
    "stage-1",
    "env"

  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-class-properties",
    "transform-react-jsx-source",
    "glamorous-displayname",
    "wildcard"
  ],
  "env": {
    "development": {
      "plugins": [
        ["transform-runtime", {
          "polyfill": true
        }]
      ]
    }
  }
}

jest.config.js

// this helps: https://github.com/facebook/jest/issues/2081#issuecomment-332406033
module.exports = {
  verbose: true,
  setupFiles: ['./jest.setup.js'],
  snapshotSerializers: ['jest-glamor-react', 'enzyme-to-json/serializer'],
  moduleFileExtensions: ['js', 'jsx'],
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/config/jest/assetsTransformer.js',
  },
};

jest.setup.js

import 'raf/polyfill';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

Надеюсь, это поможет кому-то.

У меня были проблемы с файлом svg . Я понял, что могу издеваться над этим с помощью identity-obj-proxy :

    "moduleNameMapper": {
      "\\.(css|scss|svg)$": "identity-obj-proxy"
    },

Для тех, кто изучает эту проблему, способ @timgivois прекрасно работает для меня. Вы должны установить npm install --save-dev identity-obj-proxy , чтобы получить необходимые зависимости.

  "jest": {
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
    }
  }

Хотя решение @mbaranovski работает, я не знаю, намеревался ли он использовать его в качестве преобразователя. Он выдает следующий вывод (обратите внимание на атрибут src):

<img alt="ImgName" height="28" src={ Object { "process": [Function], } } width="112" />

По сути, он отображает все из этого модуля в то место, где мне нужен SVG. Таким образом, вы можете обойтись без этого модуля, просто будучи:

module.exports = {}

Другой обходной путь, как указано выше, заключается в использовании identity-obj-proxy.

@magnusart

"jest": {
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
    }
  }

это спасает мой день. Спасибо!!.

@mbaranovski Это сработало просто отлично, когда я запускал только шутку для теста. К сожалению, когда я пытаюсь запустить реагирующие сценарии из приложения create-реагировать, я получаю

Out of the box, Create React App only supports overriding these Jest options

Есть ли обходной путь для этого? Или единственное решение — удалить приложение create-реагировать?

Я не думаю, что CRA поддерживает этот вариант. Я не уверен, почему он хочет закрыть варианты, вероятно, веская причина 🙂

/cc @gaearon

Другой обходной путь:

npm i --save-dev jest-transform-stub

"jest": {
  "transform": {
    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
  }
}

У меня есть реагирующий нативный модуль с изображениями. Я пробовал assetsTransformer , identity-obj-proxy и jest-transform-stub . Работают только активы Transformer.

Привет @sibinx7 Я исправил эту проблему: https://github.com/facebook/jest/issues/2663/#issuecomment -317109798

Я решил это, используя пакет jest-react-native , так как все решения здесь не сработали для меня. Возможно, моя проблема в другом, потому что у меня возникли проблемы с файлами PNG, находящимися внутри пакета react-native-router-flux .

Вот фрагмент моего файла package.json :

{
  // ... 
  "devDependencies": {
    // ...
    "jest": "^23.4.1",
    "jest-react-native": "^18.0.0",
  },
  "jest": {
    "preset": "jest-react-native",
    "verbose": true,
    "modulePathIgnorePatterns": [
      "<rootDir>/node_modules/react-native/Libraries/react-native/",
      "<rootDir>/node_modules/react-native/packager/"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|react-clone-referenced-element|react-navigation|react-native-router-flux))"
    ]
  },
  // ...
}

Небольшая модификация для обработки файлов xml, в данном случае с использованием опции преобразования :

jest.config.js

module.exports = {
    transform: {
        ".+.(xml|bpmn)": "<rootDir>/src/__tests__/transformers/xmlTransformer.ts"
    },
}

/src/__tests__/transformers/xmlTransformer.ts (может потребоваться изменить ваш путь,помощник, представляющий корневой каталог проекта).

module.exports = {
    process() {
        return 'module.exports = {};';
    },
    getCacheKey() {
        // The output is always the same.
        return 'xmlTransform';
    },
};

Подробнее см. здесь .

Проверьте http://facebook.github.io/jest/docs/tutorial-webpack.html#content

Данная ссылка битая

https://jestjs.io/docs/en/webpack

@magnusart

"jest": {
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
    }
  }

это спасает мой день. Спасибо!!.

Я взял пример с этого и установил babel-jest , затем заменил identity-obj-proxy на babel-jest

или используйте этот https://github.com/eddyerburgh/jest-transform-stub

у меня сработало только решение @eddyerburgh .

@magnusart
вы спасаете мой день, он отлично работает

У меня возникла эта проблема с png после добавления ./node_modules/react-native-gesture-handler/jestSetup.js в setupFiles (это была моя попытка решить проблему шутки с помощью react-native-gesture-handler ).

Я пробовал https://github.com/facebook/jest/issues/2663#issuecomment -341384494 ( @magnusart использует identity-obj-proxy ), но по какой-то причине сломал enzyme (получил enzyme 's mock в символ, а не в функцию). Затем я попробовал https://github.com/facebook/jest/issues/2663#issuecomment -369040789 (@eddyerburgh
используя jest-transform-stub ), но это ничего не сделало.

В конце концов, я попробовал https://github.com/facebook/jest/issues/2663#issuecomment -274270387 ( @cpojer решение webpack в начале), и это было единственное, что работало для меня.

Если кто-то получает эту ошибку с SVG, вероятно, может использовать эту библиотеку, у меня это сработало очень хорошо https://www.npmjs.com/package/jest-svg-transformer

Я только добавил в свой файл jest.config.ts этот код

transform: { '^.+\\.tsx?$': 'babel-jest', '^.+\\.svg$': 'jest-svg-transformer', },

И код в этом файле такой

вы, ребята, можете игнорировать moduleNameMapper, просто потому, что я использую пользовательский импорт с babel