Jest: "Kesalahan Sintaks: Token tidak valid atau tidak terduga" dengan .png

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

EDIT: tautan baru adalah https://jestjs.io/docs/en/webpack

@matheusml apakah Anda menyelesaikan ini sama sekali? @cpojer Saya dapat mengonfirmasi bahwa saya juga mengalami masalah ini. Saya memiliki aset statis di luar sumber saya. yaitu Struktur direktori saya terlihat seperti:

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

Konfigurasi jest saya terlihat mirip dengan contoh yang diberikan di tautan:

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

Pengujian saya gagal ketika mencoba mengimpor gambar:

import thumbnail from 'img/thumbnail.png'

Saya kira penting untuk dicatat bahwa jika saya tidak memasukkan direktori public di moduleDirectories , maka saya mendapatkan kesalahan: Cannot find module 'img/thumbnail.png' from 'MyModule.js'

Apakah ini diharapkan? Haruskah itu benar-benar memvalidasi keberadaan acara impor meskipun pemetaan modul sudah disiapkan? Kalau tidak, saya mendapatkan kesalahan yang sama seperti di atas. Saya belum mencoba jenis impor lain dalam nama mapper.

Saya menghadapi masalah yang sama, saya mencoba menerapkan rendering server reactjs. Perbaikan apa pun untuk ini.

Saya telah meletakkan ini di babelrc saya dan sepertinya semuanya berfungsi:

{
"preset": ["es2015", "bereaksi"]
}

Jenis kesalahan yang sama

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 <

Sepertinya saya juga mengalami masalah ini. Itu hanya terjadi ketika saya membutuhkan png.

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

Kesalahan yang sama juga. Apakah seseorang memperbaikinya?

Memiliki kesalahan yang sama dengan .mp3, Tidak ada yang membantu

Kesalahan seperti ini mungkin juga merupakan hasil dari penggunaan preset dengan path absolut yang diatur dalam modul name mapper misalnya. Namun kasus ini akan diperbaiki pada rilis berikutnya

Saya memiliki kesalahan yang sama dan menyelesaikannya dengan membuat assetsTransformer.js :

const path = require('path');

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

Kemudian tambahkan ini ke konfigurasi lelucon Anda di 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" } },

Sumber: https://facebook.github.io/jest/docs/webpack.html#content

Dalam kasus saya, saya tidak menyadari bahwa <rootDir> adalah token yang disediakan oleh Jest, dan menganggap itu adalah sesuatu yang perlu saya ganti. Menambahkannya ke entri moduleNameMapper memecahkan masalah.

Saya menambahkan assetTransformer.js yang disebutkan oleh @bombellos. Juga mengikuti petunjuk tentang Menggunakan dengan webpack . Tapi saya masih mendapatkan kesalahan yang sama.

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)

Struktur folder saya pada dasarnya adalah:

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

Rupanya, file-file itu masih dimuat alih-alih diejek, tetapi saya tidak tahu cara men-debug ini.

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

paket.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"
    }
  },

Saya bodoh, saya punya jest.config.js lain di folder root saya yang menimpa pengaturan di package.json . Meskipun belum berjalan, saya tidak mendapatkan kesalahan khusus ini lagi.

Berhasil. Berikut adalah bagian-bagian penting (harap dicatat bahwa saya memiliki beberapa konfigurasi tambahan karena enzim 3 dengan reaksi 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() });

Harapan yang membantu seseorang.

Saya mengalami masalah dengan file svg . Saya menyadari bahwa saya dapat mengejeknya dengan identity-obj-proxy :

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

Bagi siapa pun yang melihat masalah ini, cara @timgivois bekerja dengan baik untuk saya. Anda harus menginstal npm install --save-dev identity-obj-proxy untuk mendapatkan dependensi yang diperlukan.

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

Sementara solusi oleh @mbaranovski berfungsi, saya tidak tahu apakah niatnya adalah menggunakannya sebagai transformator. Ini menghasilkan output berikut (perhatikan atribut src):

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

Pada dasarnya, ini memetakan semuanya dari modul itu ke tempat saya membutuhkan SVG. Dengan demikian, Anda bisa lolos dengan modul itu hanya dengan:

module.exports = {}

Solusi lain seperti yang dinyatakan di atas adalah dengan menggunakan identitas-obj-proxy.

@magnusart

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

itu menyelamatkan hariku. Terima kasih!!.

@mbaranovski Ini bekerja dengan baik ketika saya hanya menjalankan lelucon untuk pengujian. Sayangnya ketika saya mencoba menjalankan skrip reaksi dari create-react-app yang saya dapatkan

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

Apakah ada solusi untuk ini ? Atau satu-satunya solusi adalah mengeluarkan create-react-app?

Saya tidak berpikir CRA mendukung opsi itu. Saya tidak yakin mengapa ia ingin menutup opsi, mungkin alasan yang bagus

/cc @gaearon

Solusi lain:

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

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

Saya memiliki modul reaksi asli yang memiliki gambar. Saya telah mencoba assetsTransformer , identity-obj-proxy dan jest-transform-stub . Hanya assetsTransformer yang berfungsi.

Hai @ sibinx7 Saya memperbaiki masalah itu dengan: https://github.com/facebook/jest/issues/2663/#issuecomment -317109798

Saya memecahkan ini dengan menggunakan paket jest-react-native , karena semua solusi di sini tidak berhasil untuk saya. Mungkin masalah saya berbeda, karena saya mendapat masalah dengan file PNG yang ada di dalam react-native-router-flux -package.

Berikut beberapa fragmen dari file package.json saya:

{
  // ... 
  "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))"
    ]
  },
  // ...
}

Sedikit modifikasi untuk menangani file xml, dalam hal ini menggunakan opsi transformasi :

jest.config.js

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

/src/__tests__/transformers/xmlTransformer.ts ( mungkin perlu memodifikasi jalur Anda,adalah pembantu yang mewakili direktori root proyek).

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

Lihat di sini untuk lebih jelasnya.

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

Tautan yang diberikan rusak

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

@magnusart

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

itu menyelamatkan hariku. Terima kasih!!.

Saya mengambil isyarat dari ini dan menginstal babel-jest lalu saya mengganti identity-obj-proxy dengan babel-jest

atau gunakan ini https://github.com/eddyerburgh/jest-transform-stub

hanya solusi @eddyerburgh yang bekerja untuk saya.

@magnusart
Anda menyelamatkan hari saya, itu berfungsi dengan baik

Saya mengalami masalah png ini setelah menambahkan ./node_modules/react-native-gesture-handler/jestSetup.js ke setupFiles (itu adalah upaya saya untuk menyelesaikan masalah lelucon dengan react-native-gesture-handler ).

Saya mencoba https://github.com/facebook/jest/issues/2663#issuecomment -341384494 ( @magnusart menggunakan identity-obj-proxy ), tetapi rusak enzyme untuk alasan apa pun (itu membuat enzyme 's mock menjadi simbol daripada fungsi). Kemudian saya mencoba https://github.com/facebook/jest/issues/2663#issuecomment -369040789 (@eddyerburgh
menggunakan jest-transform-stub ), tetapi tidak melakukan apa-apa.

Akhirnya, saya mencoba https://github.com/facebook/jest/issues/2663#issuecomment -274270387 ( @cpojer solusi webpack di awal), dan itulah satu-satunya yang bekerja untuk saya.

Jika ada yang mendapatkan kesalahan ini dengan SVG, mungkin dapat menggunakan lib ini, ini bekerja dengan sangat baik untuk saya https://www.npmjs.com/package/jest-svg-transformer

Saya hanya menambahkan pada file jest.config.ts saya kode ini

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

Dan kode pada file ini adalah ini

kalian dapat mengabaikan moduleNameMapper, hanya karena saya menggunakan impor khusus dengan babel