解决jest处理es模块示例详解

 更新时间:2023年02月06日 09:46:02   作者:xueyou2000  
这篇文章主要为大家介绍了解决jest处理es模块示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

问题场景

项目使用jest进行测试时, 当引入外部库是es模块时, jest无法处理导致报错.

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发现, 目前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))"]
};

脚注

以上就是解决jest处理es模块示例详解的详细内容,更多关于解决jest处理es模块的资料请关注脚本之家其它相关文章!

相关文章

  • react如何实现一个密码强度检测器详解

    react如何实现一个密码强度检测器详解

    这篇文章主要给大家介绍了关于react如何实现一个密码强度检测器的相关资料,使用这个密码强度器后可以帮助大家提高在线帐号、个人信息的安全性,需要的朋友可以参考下
    2021-06-06
  • React.js前端导出Excel的方式

    React.js前端导出Excel的方式

    这篇文章主要为大家介绍了React.js前端导出Excel的方式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • React实现核心Diff算法的示例代码

    React实现核心Diff算法的示例代码

    这篇文章主要为大家详细介绍了React如何实现Diff算法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-04-04
  • 用React-Native+Mobx做一个迷你水果商城APP(附源码)

    用React-Native+Mobx做一个迷你水果商城APP(附源码)

    这篇文章主要介绍了用React-Native+Mobx做一个迷你水果商城APP,功能需要的朋友可以参考下
    2017-12-12
  • 在react-router4中进行代码拆分的方法(基于webpack)

    在react-router4中进行代码拆分的方法(基于webpack)

    这篇文章主要介绍了在react-router4中进行代码拆分的方法(基于webpack),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 30分钟带你全面了解React Hooks

    30分钟带你全面了解React Hooks

    Hooks是一种函数,该函数允许您从函数式组件 “勾住(hook into)”React状态和生命周期功能。Hooks在类内部不起作用 - 它们允许你无需类就使用 React。
    2021-05-05
  • React中常见的TypeScript定义实战教程

    React中常见的TypeScript定义实战教程

    这篇文章主要介绍了React中常见的TypeScript定义实战,本文介绍了Fiber结构,Fiber的生成过程,调和过程,以及 render 和 commit 两大阶段,需要的朋友可以参考下
    2022-10-10
  • 浅谈React中组件间抽象

    浅谈React中组件间抽象

    这篇文章主要介绍了浅谈React中组件间抽象,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • react-redux action传参及多个state处理的实现

    react-redux action传参及多个state处理的实现

    本文主要介绍了react-redux action传参及多个state处理的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • React hook 'useState' is called conditionally报错解决

    React hook 'useState' is calle

    这篇文章主要为大家介绍了React hook 'useState' is called conditionally报错解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12

最新评论