Jest遇到了意外的令牌-SyntaxError:Unexpectedtoken'export'

我正在使用 jest 來測驗一個 react TypeScript 應用程式。

這是我正在運行的測驗：

import { render, screen } from '@testing-library/react'
import { toBeInTheDocument } from '@testing-library/jest-dom'

import ContextProvider from '../../context/ContextProvider'
import { BrowserRouter } from 'react-router-dom'
import BlogPage from './BlogPage'

describe('BlogPage', () => {

  test('Render blog page', () => {
    render(
      <ContextProvider>
        <BrowserRouter>
          <BlogPage/>
        </BrowserRouter>
      </ContextProvider>
    )

    expect(screen.getByText('In this page you can see some of the last articles I wrote.')).toBeInTheDocument()
  })

})

這是我得到的錯誤：

FAIL  src/components/blogPage/BlogPage.test.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     ? If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     ? If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     ? 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/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /home/German/Desktop/ger/code/projects/my-website/node_modules/react-markdown/index.js:6
    export {uriTransformer} from './lib/uri-transformer.js'
    ^^^^^^

    SyntaxError: Unexpected token 'export'

    > 1 | import ReactMarkdown from 'react-markdown'
        | ^
      2 | import Accordion from 'react-bootstrap/Accordion'
      3 |
      4 | interface Props {

我理解這是因為我使用的庫（react-markdown）沒有預編譯的源代碼。問題是我遵循了檔案（https://jestjs.io/docs/tutorial-react-native#transformignorepatterns-customization）并將react-markdown檔案夾添加到transformIgnorePatterns配置中，但仍然出現錯誤。

這是我的 jest.config.ts 檔案：

import type { Config } from '@jest/types'

const config: Config.InitialOptions = {
  verbose: true,
  transform: {
    '^. \\.ts?$': 'ts-jest'
  },
  transformIgnorePatterns: [
    'node_modules/(?!react-markdown/)'
  ]
}
export default config

我嘗試添加<rootDir>喜歡<rootDir>/node_modules/(?!react-markdown/)并沒有什么不同。

我還嘗試直接從 package.json 而不是 jest.config 檔案配置 jest，它也沒有任何區別。

然后我發現了這個問題：Jest transformIgnorePatterns not working，里面提到需要配置Babel。

我使用 create-react-app 創建了我的應用程式，所以我的應用程式上沒有 Babel。我安裝了它并創建了一個 babel.config.js 檔案，我在其中放置了：

module.exports = {
    "presets": [
        "@babel/preset-env"
    ]
};

但我仍然得到錯誤......我的想法已經不多了。我該如何解決這個問題的任何線索？

完整代碼可以在這里找到：https ://github.com/coccagerman/my-website

uj5u.com熱心網友回復：

react-markdown作為 js 發布，babel-jest在您的 jest 配置中添加為轉換器

  transform: {
    '^. \\.ts?$': 'ts-jest',
    "^. \\.(js|jsx)$": "babel-jest"
  },

標籤：

上一篇：盡管正在獲取動態路由引數，但組件的代碼無法訪問

下一篇：jQuery選擇器在removeAttr上是錯誤的