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設定は、リンクに示されている例のようになります。

"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"、 "react"]
}

同じタイプのエラー

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)) + ';';
  },
};

次に、これを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

私の場合、 <rootDir>がJestから提供されたトークンであることに気づかず、交換する必要があると思いました。 moduleNameMapperエントリに追加すると、問題が解決しました。

@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"]
    }
  }
}

package.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の設定を上書きしました。 まだ実行されていませんが、この特定のエラーは発生しません。

動作しました。 ここに重要なビットがあります（反応16の酵素3のためにいくつかの追加の構成があることに注意してください）：

.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テストのためにjestだけを実行したときは、問題なく動作しました。 悲しいことに、create-react-appからreact-scriptsを実行しようとすると、

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

これに対する回避策はありますか？ または、唯一の解決策はcreate-react-appをイジェクトすることですか？

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

私はreactNativeモジュールに画像があります。 assetsTransformer 、 identity-obj-proxy 、 jest-transform-stubを試しました。 AssetsTransformerのみが機能します。

こんにちは@sibinx7私はその問題を修正しました： https ：//github.com/facebook/jest/issues/2663/#issuecomment -317109798

ここでのすべての解決策がうまくいかなかったので、 jest-react-nativeパッケージを使用してこれを解決しました。 react-native-router-fluxパッケージ内にある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))"
    ]
  },
  // ...
}

この場合は変換オプションを使用して、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
あなたは私の日を救う、それはうまくいく

./node_modules/react-native-gesture-handler/jestSetup.jsをsetupFilesに追加した後、このpngの問題が発生しました（これは、 react-native-gesture-handlerでjestの問題を解決するための私の試みでした）。

https://github.com/facebook/jest/issues/2663#issuecomment -341384494（ @magnusart using 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ソリューション）を試しましたが、それが私のために働いた唯一のソリューションでした。

誰かがSVGでこのエラーを受け取っている場合、おそらくこのlibを使用できますが、私にとっては非常にうまく機能しましたhttps://www.npmjs.com/package/jest-svg-transformer

jest.config.tsファイルにこのコードを追加しただけです

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

そして、このファイルのコードはこれです

moduleNameMapperは無視できますが、これは私がbabelでカスタムインポートを使用しているからです。