解決jest處理es模塊示例詳解
更新時(shí)間：2023年02月06日 09:46:02 作者：xueyou2000
這篇文章主要為大家介紹了解決jest處理es模塊示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
問(wèn)題場(chǎng)景
項(xiàng)目使用jest進(jìn)行測(cè)試時(shí), 當(dāng)引入外部庫(kù)是es模塊時(shí), jest無(wú)法處理導(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模塊, 只有通過(guò)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庫(kù), 從而使babel-jest去處理它們
transformIgnorePatterns: ["<rootDir>/node_modules/(?!(lodash-es|other-es-lib))"]
};
腳注
以上就是解決jest處理es模塊示例詳解的詳細(xì)內(nèi)容，更多關(guān)于解決jest處理es模塊的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Redux使用方法和基本原理,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了React-Todos入門(mén)例子，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11![Vite+React+TypeScript手?jǐn)]TodoList的項(xiàng)目實(shí)踐](http://img.jbzj.com/images/xgimg/bcimg2.png)
Vite+React+TypeScript手?jǐn)]TodoList的項(xiàng)目實(shí)踐
本文主要介紹了Vite+React+TypeScript手?jǐn)]TodoList的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
基于Cloud?Studio構(gòu)建React完成點(diǎn)餐H5頁(yè)面(騰訊云?Cloud?Studio?實(shí)戰(zhàn)訓(xùn)練營(yíng))
最近也是有機(jī)會(huì)參與到了騰訊云舉辦的騰訊云Cloud Studio實(shí)戰(zhàn)訓(xùn)練營(yíng)，借此了解了騰訊云Cloud?Studio產(chǎn)品,下面就來(lái)使用騰訊云Cloud?Studio做一個(gè)實(shí)戰(zhàn)案例來(lái)深入了解該產(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來(lái)替代常規(guī)的JavaScript。JSX是一個(gè)看起來(lái)很像 XML的JavaScript語(yǔ)法擴(kuò)展。我們不需要一定使用 JSX，但它有以下優(yōu)點(diǎn)：JSX執(zhí)行更快，因?yàn)樗诰幾g為JavaScript代碼后進(jìn)行了優(yōu)化。它是類(lèi)型安全的，在編譯過(guò)程中就能發(fā)現(xiàn)錯(cuò)誤。使用JSX編寫(xiě)模板更加簡(jiǎn)單快速2022-12-12
React-Router(V6)的權(quán)限控制實(shí)現(xiàn)示例
本文主要介紹了React-Router(V6)的權(quán)限控制實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
React如何利用相對(duì)于根目錄進(jìn)行引用組件詳解
這篇文章主要給大家介紹了關(guān)于React如何使用相對(duì)于根目錄進(jìn)行引用組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
React中的useState如何改變值不重新渲染的問(wèn)題
這篇文章主要介紹了React中的useState如何改變值不重新渲染的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
react中使用Modal.confirm數(shù)據(jù)不更新的問(wèn)題完美解決方案
這篇文章主要介紹了react中使用Modal.confirm數(shù)據(jù)不更新的問(wèn)題解決方案,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09