Jest: 带有 .png 的“语法错误：无效或意外的令牌”

创建于 2017-01-21  ·  33评论  ·  资料来源: facebook/jest

我正在尝试测试一个简单的模块，但出现此错误：

Test suite failed to run

    /home/matheusml/Projects/react-completo/src/assets/images/dribble-logo.png:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){�PNG
                                                                                             ^
    SyntaxError: Invalid or unexpected token

      at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
      at Object.<anonymous> (src/components/container/Container.js:4:46)
      at Object.<anonymous> (src/components/App.js:4:44)

这是测试：

import React from 'react';
import renderer from 'react-test-renderer';
import { Router } from 'react-router';

import App from './App';

test('App', () => {
  const component = renderer.create(
    <App />
  );
  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

这是我的 package.json：

"jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|svg)$": "./src/config/fileMock.js",
      "\\.(css|scss)$": "identity-obj-proxy"
    }
  }

这是fileMock.js：

module.exports = 'test-file-stub';

谢谢！

picture matheusml
👍73

最有用的评论

我有同样的错误，并通过创建assetsTransformer.js解决它：

const path = require('path');

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

然后将其添加到 package.json 中的 jest 配置中：
"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

picture mbaranovski 于 2017-07-21
👍213 ❤66 🎉59 🚀16 👎7 😄5 👀4 😕3

所有33条评论

查看http://facebook.github.io/jest/docs/tutorial-webpack.html#content

编辑：新链接是https://jestjs.io/docs/en/webpack

cpojer picture cpojer 于 2017-01-21
👎111 👍19 😕6 ❤1

@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'

我想重要的是要注意，如果我没有在moduleDirectories中包含public目录，那么我会收到错误消息： Cannot find module 'img/thumbnail.png' from 'MyModule.js'

这是预期的吗？ 尽管已经设置了模块映射，但它是否真的应该验证导入事件的存在？ 否则我会得到与上面相同的错误。 我没有在名称映射器中尝试过任何其他类型的导入。

twgraham picture twgraham 于 2017-02-09

我面临同样的问题，我正在尝试实现 reactjs 服务器渲染。 对此的任何修复。

zeeshanjan82 picture zeeshanjan82 于 2017-03-12

我已经把它放在我的 babelrc 中并且事情似乎正在工作：

{
“预设”：[“es2015”，“反应”]
}

zeeshanjan82 picture zeeshanjan82 于 2017-03-12

同类型错误

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 <
sibinx7 picture sibinx7 于 2017-06-01
👍15

我似乎也遇到了这个问题。 它仅在我需要 png 时发生。

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){�PNG
                                                                                             ^
    SyntaxError: Invalid or unexpected token
JeffreyLeeSpokeo picture JeffreyLeeSpokeo 于 2017-06-07
👍87

同样的错误。 有人修吗？

diegomura picture diegomura 于 2017-06-27
👍8

.mp3 有同样的错误，没有什么帮助

Elf2707 picture Elf2707 于 2017-07-07

例如，这样的错误也可能是由于使用了在模块名称映射器中设置了绝对路径的预设的结果。 然而，这种情况将在下一个版本中修复

thymikee picture thymikee 于 2017-07-07
👍1

我有同样的错误，并通过创建assetsTransformer.js解决它：

const path = require('path');

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

然后将其添加到 package.json 中的 jest 配置中：
"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

mbaranovski picture mbaranovski 于 2017-07-21
👍213 ❤66 🎉59 🚀16 👎7 😄5 👀4 😕3

就我而言，我没有意识到<rootDir>是Jest 提供的令牌，并认为它是我需要替换的东西。 将它添加到moduleNameMapper条目解决了这个问题。

alecmerdler picture alecmerdler 于 2017-08-31
👍8

我添加了@bombellos 提到的assetTransformer.js 。 还遵循了使用 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"
    }
  },
alp82 picture alp82 于 2017-10-29

我很笨，我的根文件夹中有另一个jest.config.js覆盖了package.json中的设置。 尽管它尚未运行，但我不再收到此特定错误。

alp82 picture alp82 于 2017-10-29
😄7 👍6 ❤4 🎉4

得到它的工作。 以下是重要的部分（请注意，由于酶 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() });

希望对某人有所帮助。

alp82 picture alp82 于 2017-10-29
👍8 👀1 🚀1 ❤1 🎉1 👎1

我遇到了svg文件的问题。 我意识到我可以用identity-obj-proxy模拟它：

    "moduleNameMapper": {
      "\\.(css|scss|svg)$": "identity-obj-proxy"
    },
timgivois picture timgivois 于 2017-10-31
👍26 ❤6 🎉5 👎2

对于任何研究此问题的人， @timgivois方式对我来说都非常有效。 您必须安装npm install --save-dev identity-obj-proxy才能获得必要的依赖项。

  "jest": {
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
    }
  }
magnusart picture magnusart 于 2017-11-02
👍119 🎉45 ❤38 👎4

虽然@mbaranovski的解决方案有效，但我不知道他是否打算将其用作变压器。 它产生以下输出（注意 src 属性）：

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

本质上，它将从该模块的所有内容映射到我需要 SVG 的地方。 因此，您可以简单地摆脱该模块：

module.exports = {}

如上所述的另一个解决方法是使用 identity-obj-proxy。

theoutlander picture theoutlander 于 2017-11-15
👍4

@magnusart

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

它节省了我的时间。 谢谢！！。

ashishjan picture ashishjan 于 2018-02-01
👍11

@mbaranovski当我只开玩笑进行测试时，它工作得很好。 可悲的是，当我尝试从 create-react-app 运行 react-scripts 时，我得到了

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

有解决方法吗？ 还是唯一的解决方案是弹出 create-react-app？

wellyal picture wellyal 于 2018-02-05

我认为 CRA 不支持该选项。 我不确定它为什么要关闭选项，这可能是一个很好的理由🙂

/cc @gaearon

SimenB picture SimenB 于 2018-02-05

另一种解决方法：

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

"jest": {
  "transform": {
    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
  }
}
eddyerburgh picture eddyerburgh 于 2018-02-27
👍50 🎉20 🚀7 ❤2 👀1

我有一个反应原生模块有图像。 我试过assetsTransformer 、 identity-obj-proxy和jest-transform-stub 。 只有 assetsTransformer 有效。

gengjiawen picture gengjiawen 于 2018-05-24

嗨@sibinx7我通过以下方式解决了这个问题： https ://github.com/facebook/jest/issues/2663/#issuecomment -317109798

hanpanpan200 picture hanpanpan200 于 2018-06-20

我通过使用jest-react-native包解决了这个问题，因为这里的所有解决方案都不适合我。 也许我的问题是另一个问题，因为我在react-native-router-flux -package 中遇到了 PNG 文件的问题。

这是我的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))"
    ]
  },
  // ...
}
FibreFoX picture FibreFoX 于 2018-07-26
👍2 ❤1 🎉1 👎1

处理 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';
    },
};

有关更多详细信息，请参见此处。

harps116 picture harps116 于 2018-09-12

查看http://facebook.github.io/jest/docs/tutorial-webpack.html#content

给定的链接已损坏

riyajk picture riyajk 于 2018-12-02

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

rickhanlonii picture rickhanlonii 于 2018-12-02
👎2 👍1

@magnusart

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

它节省了我的时间。 谢谢！！。

我从中得到提示并安装babel-jest然后我将identity-obj-proxy替换为babel-jest

vic3king picture vic3king 于 2019-04-19
👍9 👎1

或使用此https://github.com/eddyerburgh/jest-transform-stub

yyynnn picture yyynnn 于 2019-07-01
👍3

只有@eddyerburgh的解决方案对我有用。

begueradj picture begueradj 于 2020-01-02

@magnusart
你拯救了我的一天，它工作正常

guilleanto22 picture guilleanto22 于 2020-03-04
👍1

在将./node_modules/react-native-gesture-handler/jestSetup.js添加到setupFiles后，我遇到了这个 png 问题（这是我尝试用react-native-gesture-handler解决笑话问题）。

我尝试了https://github.com/facebook/jest/issues/2663#issuecomment -341384494 （ @magnusart使用identity-obj-proxy ），但无论出于何种原因，它都打破了enzyme （它赚了enzyme的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解决方案），这是唯一对我有用的。

FanchenBao picture FanchenBao 于 2020-04-06
👍3

如果有人在使用 SVG 时遇到此错误，可能可以使用这个库，它对我来说非常有用https://www.npmjs.com/package/jest-svg-transformer

我只在我的jest.config.ts文件中添加了这段代码

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

这个文件上的代码是这样的
Captura de Tela 2020-11-09 às 13 17 01

你们可以忽略moduleNameMapper，只是因为我正在使用带有babel的自定义导入

gus-messagi picture gus-messagi 于 2020-11-09
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

Secretmapper picture Secretmapper  ·  3评论
emmby picture emmby  ·  3评论
Antho2407 picture Antho2407  ·  3评论
stephenlautier picture stephenlautier  ·  3评论
ianp picture ianp  ·  3评论