Jest: Bercanda menemukan token tak terduga dengan aplikasi React

Saya mempunyai masalah yang sama juga.

Masalah yang sama disini.

masalah yang sama di sini .. sedikit lebih rumit karena saya bekerja dengan monorepo.

@fabioSalimbeni @hoaiduyit @mikedloss Saya telah membuat tes React dan React Native saya ( Jest dan enzyme ) lulus dalam Lerna monorepo menggunakan Babel 7.

Anda perlu menggunakan konfigurasi Babel baru dengan babel.config.js jika Anda sedang mengerjakan monorepo: https://babeljs.io/docs/en/v7-migration.

Ini babel.config.js untuk root monorepo:

module.exports = {
    overrides: [
        {
            test: 'platforms/webApp1',
            extends: 'platforms/webApp1/babel.config.js'
        },
        {
            test: 'platforms/webApp2',
            extends: 'platforms/webApp2/babel.config.js'
        }
    ]
};

Ini adalah tampilan babel.config.js untuk webApp1 salah satu aplikasi monorepo:

module.exports = {
    env: {
        test: {
            presets: [
                [
                    '@babel/preset-env',
                    {
                        modules: 'commonjs',
                        debug: false
                    }
                ],
                '@babel/preset-flow',
                '@babel/preset-react'
            ],
            plugins: [
                '@babel/plugin-syntax-dynamic-import',
                '@babel/plugin-proposal-class-properties'
            ]
        },
        production: {
            presets: [
                ['@babel/preset-env', { modules: false }],
                '@babel/preset-flow',
                '@babel/preset-react'
            ],
            plugins: [
                '@babel/plugin-syntax-dynamic-import',
                '@babel/plugin-proposal-class-properties'
            ]
        },
        development: {
            presets: [
                ['@babel/preset-env', { modules: false }],
                '@babel/preset-flow',
                '@babel/preset-react'
            ],
            plugins: [
                '@babel/plugin-syntax-dynamic-import',
                '@babel/plugin-proposal-class-properties'
            ]
        }
    }
};

Dan ini adalah konfigurasi Jest:

    "jest": {
        "verbose": true,
        "clearMocks": true,
        "collectCoverage": true,
        "setupTestFrameworkScriptFile": "<rootDir>/config/setupTest.js",
        "transform": {
            "^.+\\.js$": "babel-jest"
        },
        "moduleNameMapper": {
            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
            "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
        }
    }

setupTest.js terlihat seperti:

const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');

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

fileMocks.js terlihat seperti:

module.exports = 'i-am-a-stubbed-file';

styleMocks.js terlihat seperti:

module.exports = {};

Anda juga perlu menambahkan beberapa plugin Babel dan versi babel-core sebagai devDependencies di package.json dari setiap aplikasi:

        ...
        "@babel/cli": "^7.0.0",
        "@babel/core": "^7.0.0",
        "@babel/plugin-proposal-class-properties": "^7.0.0",
        "@babel/plugin-syntax-dynamic-import": "^7.0.0",
        "@babel/preset-env": "^7.0.0",
        "@babel/preset-flow": "^7.0.0",
        "@babel/preset-react": "^7.0.0",
        "babel-core": "7.0.0-bridge.0",
        "babel-eslint": "^9.0.0",
        "babel-jest": "^23.4.2",
        "babel-loader": "^8.0.2",
        ...
        "jest": "^23.5.0",
        "jest-cli": "^23.5.0",
        ...

Setelah 3 hari, saya baru tahu solusi untuk masalah ini.
Ada 2 solusi untuk ini:

Solusi 1:

Anda dapat mengubah nama file Anda dari .babelrc menjadi babel.config.js , dan ini akan berhasil.

## Solusi 2:
Saya menggunakan cara ini.
Buat file transformasi seperti ini (milik saya jest-transforme.js ):

const config = {
  babelrc: false,
  presets: [
    [
      "@babel/env",
      {
        modules: false
      }
    ],
    "@babel/react"
  ],
  plugins: [
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    ["@babel/plugin-proposal-class-properties", { loose: true }],
    "transform-es2015-modules-commonjs"
  ]
};
module.exports = require("babel-jest").createTransformer(config);

Ini jest.config.js :

module.exports = {
  collectCoverageFrom: ["src/**/*.{js,jsx,mjs}"],
  testMatch: ["<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}", "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"],
  transform: {
    "^.+\\.(js|jsx|mjs)$": "<rootDir>/config/jest/jest-transformer.js"
  },
  transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"]
};

Dan saya, saya masih memiliki .babelrc
```
const lingkungan = membutuhkan("./env-config.js");

modul.ekspor = {
preset: [
[
"berikutnya/babel",
{
"preset-env": {
useBuiltIns: "entri"
}
}
]
],
plugin: [
["styled-components", { ssr: true, displayName: true, preprocess: false }],
[
"penyelesai modul",
{
akar: ["./"]
}
]
],
lingkungan: {
pengembang: {
plugin: [
["transform-define", lingkungan],
["penyelesai modul", { root: ["./"] }],
"transformasi-dekorator-warisan",
"transform-class-properties"
]
},
membangun: {
plugin: [
["transform-define", lingkungan],
["penyelesai modul", { root: ["./"] }],
"transformasi-dekorator-warisan",
"mengubah-kelas-properti"
]
},
produksi: {
preset: [
[
"minify", // mengapa menambahkan minify di sini, kami menjalankan uglify di seluruh bundel kode
{
mangle: palsu,
menilai: salah
}
]
],
plugin: [
["transform-define", lingkungan],
["@babel/plugin-proposal-decorators", { warisan: benar }],
["@babel/plugin-proposal-class-properties", { lepas: benar }],
["penyelesai modul", { root: ["./"] }]
],
komentar: salah,
kompak: benar,
diperkecil: benar
}
}
};
````
Semoga ini bisa membuat kalian melewati masalah ini. Bersorak.

@GeorgianSorinMaxim Masalahnya adalah aplikasi lelucon saya mengabaikan file .babelrc , dan mengubah ke babel.config.js akan menyelesaikan masalah, tetapi saya tetap menyelesaikannya, jawaban saya ada di atas komentar ini.

terima kasih @GeorgianSorinMaxim @hoaiduyit pada akhirnya saya telah menyelesaikannya hanya dengan membuat transformator khusus untuk babel-jest. Tidak ada perubahan lain jika diperlukan.

Babel 7 tampaknya membutuhkan babel.config.js untuk bekerja dengan baik, gunakan itu sebagai ganti babelrc

babel-jest masih mengandalkan babel-core dari Babel 6, jika anda ingin menggunakan Babel 7 anda dapat menggunakan
transformator ini babel7-jest

babel-jest berfungsi dengan baik dengan babel 7, tidak perlu trafo khusus

@SimenB Saya mengganti nama .babelrc menjadi babel.config.js tetapi masih menunjukkan kesalahan itu dengan token yang tidak terduga. Ia bekerja dengan babel7-pre.42 sekalipun. Apakah ada hal lain yang sering terlewatkan? :) Terima kasih.

@alexindigo Lihat ini tentang cara menulis babel.config.js

https://babeljs.io/docs/en/configuration

Ya, menjalankan yarn upgrade --latest memperbaiki masalah :)

@alexindigo @hoaiduyit Bagaimana kalian semua mengetahui hal ini tentang babel.config.js ? Memerangi masalah yang sama dan menemukan solusi Anda, saya berpikir dalam hati... _"hmmm, Tidak mungkin ini akan berhasil, tetapi saya akan tetap mencobanya."_ tapi tentu saja berhasil lulz. Terima kasih

Konfigurasi lelucon & enzim : Tambahkan kode berikut di package.json

"jest": {
    "testEnvironment": "jsdom",
    "moduleDirectories": [
      "src",
      "node_modules"
    ],
    "moduleNameMapper": {
      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(jpg|gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
    },
    "transform": {
      "^.+\\.(js|jsx)$": "babel-jest",
      ".+\\.(css|styl|less|sass|scss)$": "<rootDir>/node_modules/jest-css-modules-transform"
    },
    "setupTestFrameworkScriptFile": "<rootDir>/setupTests.js",
    "setupFiles": [
      "<rootDir>setup.js"
    ],
    "moduleFileExtensions": [
      "css",
      "scss",
      "js",
      "json",
      "jsx"
    ],
    "testRegex": "\/test\/spec\/.*\\.js$",
    "transformIgnorePatterns": [
      "/node_modules/(?!test-component).+\\.js$"
    ]
  }

Untuk pengaturan Enzim => setup.js

import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() })

Untuk setupTestFrameworkScriptFile : setupTests.js global.fetch = require('jest-fetch-mock')

const { JSDOM } = require('jsdom')
const jsdom = new JSDOM('<!doctype html><html><body></body></html>')
const { window } = jsdom

const exposedProperties = ['window', 'navigator', 'document']
const { document } = new JSDOM('').window
global.document = document
global.window = document.defaultView
global.HTMLElement = window.HTMLElement
global.HTMLAnchorElement = window.HTMLAnchorElement

Object.keys(document.defaultView).forEach(property => {
  if (typeof global[property] === 'undefined') {
    exposedProperties.push(property)
    global[property] = document.defaultView[property]
  }
})

global.navigator = {
  userAgent: 'node.js',
}

hanya file .tsx menghadapi masalah yang sama?

sekedar menyebarkan berita, Jest v24 telah diperbarui untuk menggunakan Babel 7 secara internal, menggunakan babel bridge atau babel7-jest seharusnya tidak diperlukan lagi
https://twitter.com/i/web/status/1088904207653105664

Saya mengganti nama .babelrc menjadi babel.config.js dan juga memutakhirkan ke Babel7 dan masih memiliki kesalahan yang sama seperti sebelumnya. File babel.config.js :

module.exports = function (api) {
  api.cache(true);

  const presets = ["@babel/preset-env"];

  return {
    presets
  };
}

Saya menginstal @babel/preset-react dan menambahkannya ke file babel.config.js . Memperbaiki kesalahan.

File babel.config.js saya tidak terdeteksi oleh babel-jest , karena saya meletakkannya di dalam direktori __test__ . Saya memindahkannya ke direktori teratas tempat package.json berada dan semuanya berfungsi.

Saya memecahkan masalah serupa dengan melakukan hal berikut:

1- tambahkan file pengaturan enzim dan tulis yang berikut:

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

2- tambahkan konfigurasi lelucon ke package.json Anda seperti itu:

"jest": {
 "setupFilesAfterEnv": [
  "./path to your setup file/setupEnzyme.js"
 ]
}

3- tambahkan file .babelrc ke jalur root Anda dan tulis yang berikut di dalamnya:

{
    "env": {
        "test": {
            "presets": [
                "@babel/preset-env",
                "@babel/preset-react"
            ]
        }
    }
}

4- jika Anda mendapatkan kesalahan pada kata kunci "harapan" dalam pengujian Anda, jalankan saja npm install -D chai dan impor fungsi ekspektasi dalam kode pengujian Anda seperti itu import { expect } from 'chai';

jika Anda masih mendapatkan kesalahan coba instal dependensi babel seperti itu npm install -D @babel/core @babel/preset-env @babel/preset-react

semoga ini membantu.

Setelah 3 hari, saya baru tahu solusi untuk masalah ini.
Ada 2 solusi untuk ini:

Solusi 1:

Anda dapat mengubah nama file Anda dari .babelrc menjadi babel.config.js , dan ini akan berhasil.

Solusi saya:

Saya tidak memiliki file .babelrc jadi saya pikir melakukan kebalikannya juga akan berhasil dan membuat file .babelrc menggunakan info preset dari babel.config.js sebagai gantinya. (Saya membuat file tambahan, saya tidak mengganti nama aslinya)
Setelah menjalankan tes lagi saya menerima kesalahan baru: Requires Babel "^7.0.0-0", but was loaded with "6.26.3" .
Saya mencari kesalahan itu di Google dan itu membawa saya ke sini . Saya mengikuti instruksi ( npm install [email protected] ) dan tes sekarang berjalan dan lulus.

sekedar menyebarkan berita, Jest v24 telah diperbarui untuk menggunakan Babel 7 secara internal, menggunakan babel bridge atau babel7-jest seharusnya tidak diperlukan lagi
https://twitter.com/i/web/status/1088904207653105664

Memutakhirkan ke Jest v24 memperbaiki masalah ini untuk saya :)

mendapatkan unexpected token kesalahan untuk

> 10 | const browser; (titik koma di akhir)

paket saya.json

 "dependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.4",
    "@babel/register": "^7.0.0",
    "assert": "^1.4.1",
    "chai": "^4.2.0",
    "jest-puppeteer": "^4.0.0",
    "screen-info": "^1.0.1",
    "screenres": "^2.0.1"
  },
  "devDependencies": {
    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
    "@babel/preset-env": "^7.3.4",
    "babel-jest": "^24.5.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-jest": "^24.3.0",
    "jest": "^24.5.0",
    "jest-cli": "^24.5.0",
    "puppeteer": "^1.13.0"
  },
  "jest": {
    "transformIgnorePatterns": [
      "/node_modules/(?!@babel).+\\.js$"
    ],
    "transform": {
      "^.+\\.js?$": "babel-jest"
    }
  },

babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current'
        },
      },
      'jest'
    ]
  ],
  env: {
    test: {
      plugins: ['@babel/plugin-transform-modules-commonjs']
    }
  }
}

Solusi hoaiduyit yang diuji. Ini bekerja. Saya hanya perlu menambahkan babel.config.js, instal lelucon babel-jest transform/transpile di jest.config.js

Setelah 3 hari, saya baru tahu solusi untuk masalah ini.
Ada 2 solusi untuk ini:

Solusi 1:

Anda dapat mengubah nama file Anda dari .babelrc menjadi babel.config.js , dan ini akan berhasil.

Solusi 2:

Saya menggunakan cara ini.
Buat file transformasi seperti ini (milik saya jest-transforme.js ):

const config = {
  babelrc: false,
  presets: [
    [
      "@babel/env",
      {
        modules: false
      }
    ],
    "@babel/react"
  ],
  plugins: [
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    ["@babel/plugin-proposal-class-properties", { loose: true }],
    "transform-es2015-modules-commonjs"
  ]
};
module.exports = require("babel-jest").createTransformer(config);

Ini jest.config.js :

module.exports = {
  collectCoverageFrom: ["src/**/*.{js,jsx,mjs}"],
  testMatch: ["<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}", "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"],
  transform: {
    "^.+\\.(js|jsx|mjs)$": "<rootDir>/config/jest/jest-transformer.js"
  },
  transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"]
};

Dan saya, saya masih memiliki .babelrc

const enviroments = require("./env-config.js");

module.exports = {
  presets: [
    [
      "next/babel",
      {
        "preset-env": {
          useBuiltIns: "entry"
        }
      }
    ]
  ],
  plugins: [
    ["styled-components", { ssr: true, displayName: true, preprocess: false }],
    [
      "module-resolver",
      {
        root: ["./"]
      }
    ]
  ],
  env: {
    dev: {
      plugins: [
        ["transform-define", enviroments],
        ["module-resolver", { root: ["./"] }],
        "transform-decorators-legacy",
        "transform-class-properties"
      ]
    },
    build: {
      plugins: [
        ["transform-define", enviroments],
        ["module-resolver", { root: ["./"] }],
        "transform-decorators-legacy",
        "transform-class-properties"
      ]
    },
    production: {
      presets: [
        [
          "minify", // why add minify here, we run uglify over the whole code bundles
          {
            mangle: false,
            evaluate: false
          }
        ]
      ],
      plugins: [
        ["transform-define", enviroments],
        ["@babel/plugin-proposal-decorators", { legacy: true }],
        ["@babel/plugin-proposal-class-properties", { loose: true }],
        ["module-resolver", { root: ["./"] }]
      ],
      comments: false,
      compact: true,
      minified: true
    }
  }
};

Semoga ini bisa membuat kalian melewati masalah ini. Bersorak.

tks untuk metode Anda ~ metode ini dapat memperbaiki masalah saya dengan benar!

Hai - Saya telah mencoba beberapa hal di utas ini, tetapi sepertinya tidak ada yang berhasil. Kesalahan utama adalah aneh b/c sepertinya menunjuk pada nomor baris yang tidak masuk akal, hampir seperti kode sumber dan kode aktual yang coba dijalankan tidak sejajar..

Kesalahan ini, Jest menemukan token yang tidak terduga, tetap ada. Saya menggunakan Jest> 24, tidak ada skrip jenis, ini adalah aplikasi reaksi-buat yang dikeluarkan baru-baru ini (6 bulan yang lalu ~). Menghapus cache dan menghapus node_modules tidak membantu. Mungkin seseorang dapat menjelaskan dengan tepat konfigurasi apa yang harus ada agar lelucon dapat diubah dan dijalankan dengan benar dan petunjuk apa yang diberikan oleh kesalahan saya yang sebenarnya ...

FAIL  __e2e__/chat/sms.spec.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    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:

    /Users/ben/dev/app/webui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:17
    export default function _asyncToGenerator(fn) {
    ^^^^^^

    SyntaxError: Unexpected token export

       5 |   afterEach(async () => {
       6 |     await logout();
    >  7 | 
         | ^
       8 |     await page.evaluate(() => {
       9 |       localStorage.clear();
      10 |     });

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at Object.<anonymous> (__e2e__/chat/sms.spec.js:7:49)

Terima kasih semua,

Jenkins gagal karena masalah ini, apakah ada solusi yang berfungsi?

Bagi siapa saja yang menggunakan Create-React-App, menambahkan transformignorepatterns ke package.json Anda tidak akan menyelesaikan masalah karena hanya konfigurasi lelucon tertentu yang dapat diubah di package.json saat menggunakan CRA.

Saya memiliki masalah dengan Jest mengambil perpustakaan internal, Jest akan menampilkan kesalahan 'token tak terduga' di mana pun saya mengimpor dari perpustakaan ini.

Untuk mengatasi ini, Anda dapat mengubah skrip pengujian Anda menjadi di bawah ini:
"test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(<your-package-goes-here>)/)'",

Hai semua, saya berjuang untuk melakukan pengujian unit dengan proyek kecil saya yang disebut JetSet dan menulis dalam React Native. Saya mencari selama 2 hari untuk menyelesaikan masalah ini, dan saya telah mencoba mengedit hal-hal seperti babel.config.js, menghapus file itu dan kemudian membuat file .babel (dan menambahkan beberapa kotoran).

_Laporan bug:_
D:\jetset\JetSetApp>bercanda SaveData.test.js
GAGAL __test__/SaveData.test.js
● Test suite gagal dijalankan

Jest encountered an unexpected token

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:

D:\jetset\JetSetApp\node_modules\expo-file-system\build\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import * as FileSystem from './FileSystem';
                                                                                                ^

SyntaxError: Unexpected token *

  1 | import React, { Component } from 'react'
  2 | import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'
> 3 | import { documentDirectory, getInfoAsync, readDirectoryAsync, readAsStringAsync, writeAsStringAsync, deleteAsync } from 'expo-file-system';
    | ^
  4 |
  5 | /**
  6 |  * This class primarily serves to handle files within the phone system so that results can be stored

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (app/resources/SaveData/SaveData.js:3:1)

Test Suites: 1 gagal, total 1
Tes: 0 total
Snapshot: 0 total
Waktu: 3.509s
Jalankan semua rangkaian pengujian yang cocok dengan /SaveData.test.js/i.

_ babel.config.js _
module.exports = function(api) {
api.cache(benar);
kembali {
preset: ['babel-preset-expo'],
};
};

_ paket.json _
{
"main": "node_modules/expo/AppEntry.js",
"skrip": {
"mulai": "mulai pameran",
"android": "mulai pameran --android",
"ios": "mulai pameran --ios",
"web": "mulai pameran --web",
"keluarkan": "keluarkan pameran",
"tes": "bercanda"
},
"bercanda": {
"preset": "asli-reaksi"
},
"ketergantungan": {
"pameran": "^34.0.1",
"expo-file-system": "^6.0.2",
"expo-mail-komposer": "^6.0.0",
"momen": "^2.24.0",
"bereaksi": "16.8.3",
"react-dom": "^16.8.6",
"react-native": " https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz ",
"react-native-gesture-handler": "^1.3.0",
"react-native-selection-group": "^1.1.2",
"react-native-web": "^0.11.4"
},
"devDependencies": {
"@babel/inti": "^7.6.2",
"@babel/preset-env": "^7.6.2",
"babel-jest": "^24.9.0",
"babel-preset-expo": "^6.0.0",
"bercanda": "^24.9.0",
"prop-types": "^15.7.2",
"react-native-dismiss-keyboard": "^1.0.0",
"react-native-modal-datetime-picker": "^7.5.0",
"react-navigation": "^3.12.1"
},
"pribadi": benar
}

FYI Saya pikir kami akhirnya menemukan solusi yang sangat konyol untuk ini, seperti seluruh sistem build tidak berfungsi dengan baik jika NODE_ENV="test" tidak disetel.

Dalam versi yang lebih baru dari React Jest dibangun di dalam package.json skrip pengujian harus
"test": "react-scripts test"
dari pada
"test": "jest"

Dalam versi yang lebih baru dari React Jest dibangun di dalam package.json skrip pengujian harus
"test": "react-scripts test"
dari pada
"test": "jest"

Terima kasih banyak, itu memecahkan masalah bagi saya!

Setelah mencoba BANYAK, masalah bagi saya:
"transform-es2015-modules-commonjs", hilang pada file .babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ],
    "transform-flow-strip-types",
    "jsx-control-statements",
    "import-glob",
    "transform-es2015-modules-commonjs",
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ]
}

"bercanda": "^24.9.0",
"babel-jest": "23.6.0",

coba perbarui lelucon dan babel-jest Anda

Saya mengganti nama .babelrc menjadi babel.config.js dan juga memutakhirkan ke Babel7 dan masih memiliki kesalahan yang sama seperti sebelumnya. File babel.config.js :

module.exports = function (api) {
  api.cache(true);

  const presets = ["@babel/preset-env"];

  return {
    presets
  };
}

Saya menginstal @babel/preset-react dan menambahkannya ke file babel.config.js . Memperbaiki kesalahan.

ini memperbaiki masalah saya, saya menginstal @ babel/preset-env dan menambahkan ke babel.config.js dan itu diperbaiki

terima kasih @jmayergit

Saya telah mengubah file babel.rc menjadi file babel.config.js tetapi tidak berhasil untuk saya. Kemudian saya melihat jawaban ini: https://stackoverflow.com/questions/58470062/test-jest-with-babel-plugin-import
Jika seseorang memiliki plugin impor, pisahkan plugin untuk lingkungan pengujian, pengembangan, dan produksi.

File babel.config.js saya sekarang terlihat seperti ini yang berfungsi:

module.exports = {
  presets: [
    [
      'next/babel',
    ],
  ],
  env: {
    test: {

    },
    dev: {
      plugins: [
        ['import', { libraryName: 'antd', style: 'css' }],
      ],
    },
    production: {
      plugins: [
        ['import', { libraryName: 'antd', style: 'css' }],
      ],
    },
  },
};

Saya juga berjuang dengan kesalahan ini dari 5 hari

    Jest encountered an unexpected token

    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: C:\Users\SK-PC\Desktop\React-Course\expansify\src\test\components\MyNavbar.test.js: Unexpected token (5:28)

      3 | import { MyNavbar } from '../../components/MyNavbar'
      4 | test("Should return MyNavbar component", () => {
    > 5 |     const wrapper = shallow(<MyNavbar />)
        |                             ^
      6 |     expect(wrapper.find('.navbar-brand').find('kbd').text()).toBe("Expensify")
      7 |     // const renderer = new ReactShallowRenderer()
      8 |     // renderer.render(<MyNavbar />)

      at Parser._raise (node_modules/@babel/parser/src/parser/location.js:241:45)
      at Parser.raiseWithData (node_modules/@babel/parser/src/parser/location.js:236:17)
      at Parser.raise (node_modules/@babel/parser/src/parser/location.js:220:17)
      at Parser.unexpected (node_modules/@babel/parser/src/parser/util.js:149:16)
      at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1144:20)
      at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:539:23)
      at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:519:21)
      at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:311:23)
      at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:263:23)
      at Parser.parseMaybeAssign (node_modules/@babel/parser/src/parser/expression.js:211:21)

 PASS  src/test/reducers/filters.test.js

Test Suites: 1 failed, 5 passed, 6 total
Tests:       29 passed, 29 total
Snapshots:   0 total
Time:        12.144s
Ran all test suites.

@fullstacksk

Dalam versi yang lebih baru dari React Jest dibangun di dalam package.json skrip pengujian harus
"test": "react-scripts test"
dari pada
"test": "jest"

Anda bisa membaca dokumen di:
https://jestjs.io/docs/en/tutorial-react
https://create-react-app.dev/docs/running-tests/#docsNav

@catmans1
Saya belum menginstal dependensi seperti create-react-app atau react-scripts.
Apakah itu akan berhasil?
"test": "react-scripts test"
dari pada
"test": "jest"

Sekarang berfungsi, ketika saya menggunakan babel-preset-jest untuk menguji opsi dengan env dan bereaksi. Saya telah menghapus babel-jeast.

Bekerja untuk saya: sertakan “@babel/preset-react” di babel.config.js

https://medium.com/@audreyhal/how -to-solve-jest-error-with-create-react-app-part-1-80f33aa1661a

Saya melihat kesalahan ini setelah membuat kesalahan bodoh dan menulis file pengujian pertama saya dengan ekstensi .ts alih-alih .tsx . Jauh dari masalah aslinya tetapi saya pikir itu mungkin bermanfaat bagi seseorang