Jest 一些报错信息

Jest 一些报错信息

碰到了一些 Jest 的报错，列一下搜到的解决方案

CRA & Jest

这个是我的项目的问题，运行 Jest 后报错说 "SyntaxError: Unexpected token export"，最后是用在 StackOverflow 第二个解决方案成功的，修改方法为在 package.json 中添加 --transformIgnorePatterns 这个 flag：

"scripts": {
  "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!your-module-name)/\"",
},

下面一个评论说 CRA3 新增了对于 transformIgnorePatterns 的支持，可以直接将其添加到 package.json 里，不过鉴于我们项目用了 react-app-rewired，我又不是很想现在折腾 react-app-rewired，就直接在执行的时候运行了

与 CRA 无关的一些额外操作

node 版本太落后的这个情况我默认排除了，假设当前 node 版本 >= 16(16 的 LTS 到 23 年 8 月，其实已经 outdated 了)，所以在 node 中使用 ES6 应该不成问题

Jest

主要的原因是因为 Jest 默认不会 compile/transpile node_module 下的包，然后有些项目可能用 TS/比较新的版本/默认你会 compile，所以就没办法运行成功，这个时候就需要告诉 Jest 去编译代码，配置如下：

{
  "jest": {
    "transformIgnorePatterns": ["node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)"]
  }
}

babel

这里说的是使用 babel 去 transpile 新版的 ES6，实现方法如下：

• Babel 7 >=

  安装 npm install --save-dev @babel/plugin-transform-modules-commonjs

  修改 babelrc 文件：

  "env": {
    "test": {
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
    }
  

• Babel 6 >=

  安装 npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

  修改 babelrc 文件：

  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
    }
  

mock

对于一些不需要的文件，如 CSS/图片等，也可以使用 mock 一个文件完成功能，实现如：

"\\.(css|less)$": "<rootDir>/__mocks__/styleMocks.js" but my file was named styleMock.js

以上代码可以加到 Jest 的 config 文件中去

reference

• Jest gives an error: “SyntaxError: Unexpected token export”

• jest ignore all node_modules except 1 package

• Jest error Could not locate module … mapped as:

• jest unexpected token when importing css