解決jest處理es模塊示例詳解

更新時(shí)間：2023年02月06日 09:46:02 作者：xueyou2000

這篇文章主要為大家介紹了解決jest處理es模塊示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

問題場景

項(xiàng)目使用jest進(jìn)行測試時(shí), 當(dāng)引入外部庫是es模塊時(shí), jest無法處理導(dǎo)致報(bào)錯(cuò).

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.
Details:
/home/xueyou/workspace/projects/node_modules/lodash-es/lodash.js:10
import * as lodash from 'lodash-es'
SyntaxError: Unexpected token *

解決方法

查閱issues發(fā)現(xiàn), 目前jest不支持em模塊, 只有通過babel去處理了

安裝依賴

yarn add --dev babel-jest @babel/core @babel/preset-env babel-plugin-transform-es2015-modules-commonjs

配置babel.config.js

module.exports = {
    presets: [
        [
            "@babel/preset-env",
            {
                targets: {
                    node: "current"
                }
            }
        ]
    ],
    plugins: ["transform-es2015-modules-commonjs"]
};

配置jest.config.js

module.exports = {
    preset: "ts-jest",
    testMatch: ["<rootDir>/tests/**/*.(spec|test).ts?(x)"],
    transform: {
        // 將.js后綴的文件使用babel-jest處理
        "^.+\\.js$": "babel-jest",
        "^.+\\.(ts|tsx)$": "ts-jest"
    },
    // 下面非要從重要, 將不忽略 lodash-es, other-es-lib 這些es庫, 從而使babel-jest去處理它們
    transformIgnorePatterns: ["<rootDir>/node_modules/(?!(lodash-es|other-es-lib))"]
};

腳注

Unexpected import inside nodejs module
Unexpected Token Import for ES6 modules

以上就是解決jest處理es模塊示例詳解的詳細(xì)內(nèi)容，更多關(guān)于解決jest處理es模塊的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

Redux使用方法和基本原理解讀
這篇文章主要介紹了Redux使用方法和基本原理,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
詳解React-Todos入門例子
本篇文章主要介紹了React-Todos入門例子，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11
Vite+React+TypeScript手?jǐn)]TodoList的項(xiàng)目實(shí)踐
本文主要介紹了Vite+React+TypeScript手?jǐn)]TodoList的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05
基于Cloud?Studio構(gòu)建React完成點(diǎn)餐H5頁面(騰訊云?Cloud?Studio?實(shí)戰(zhàn)訓(xùn)練營)
最近也是有機(jī)會(huì)參與到了騰訊云舉辦的騰訊云Cloud Studio實(shí)戰(zhàn)訓(xùn)練營，借此了解了騰訊云Cloud?Studio產(chǎn)品,下面就來使用騰訊云Cloud?Studio做一個(gè)實(shí)戰(zhàn)案例來深入了解該產(chǎn)品的優(yōu)越性吧,感興趣的朋友跟隨小編一起看看吧
2023-08-08
react?路由權(quán)限動(dòng)態(tài)菜單方案配置react-router-auth-plus
這篇文章主要為大家介紹了react路由權(quán)限動(dòng)態(tài)菜單方案react-router-auth-plus傻瓜式配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
React?JSX深入淺出理解
React使用JSX來替代常規(guī)的JavaScript。JSX是一個(gè)看起來很像 XML的JavaScript語法擴(kuò)展。我們不需要一定使用 JSX，但它有以下優(yōu)點(diǎn)：JSX執(zhí)行更快，因?yàn)樗诰幾g為JavaScript代碼后進(jìn)行了優(yōu)化。它是類型安全的，在編譯過程中就能發(fā)現(xiàn)錯(cuò)誤。使用JSX編寫模板更加簡單快速
2022-12-12
React-Router(V6)的權(quán)限控制實(shí)現(xiàn)示例
本文主要介紹了React-Router(V6)的權(quán)限控制實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
React如何利用相對于根目錄進(jìn)行引用組件詳解
這篇文章主要給大家介紹了關(guān)于React如何使用相對于根目錄進(jìn)行引用組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-10-10
React中的useState如何改變值不重新渲染的問題
這篇文章主要介紹了React中的useState如何改變值不重新渲染的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
react中使用Modal.confirm數(shù)據(jù)不更新的問題完美解決方案
這篇文章主要介紹了react中使用Modal.confirm數(shù)據(jù)不更新的問題解決方案,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-09-09