如何编写 Jest transformIgnorePatterns答案

【问题标题】：How to write Jest transformIgnorePatterns如何编写 Jest transformIgnorePatterns
【发布时间】：2019-02-01 17:47:24
【问题描述】：

我有这个例外

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.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    C:\Code\SPFx\BCO\node_modules\@microsoft\sp-core-library\lib\index.js:11
    export { default as _BrowserDetection } from './BrowserDetection';
    ^^^^^^

    SyntaxError: Unexpected token export

      19 | } from 'office-ui-fabric-react/lib/Utilities';
      20 | import { IUserProvider } from "../UserProviders/IUserProvider";
    > 21 | import {
         | ^
      22 |   Environment,
      23 |   EnvironmentType
      24 | } from '@microsoft/sp-core-library';

      at ScriptTransformer._transformAndBuildScript (node_modules/jest/node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (src/webparts/BCO/components/EmployeeSelector/EmployeeSelector.tsx:21:1)
      at Object.<anonymous> (src/webparts/BCO/components/FieldMapping/FieldMapping.tsx:13:1)

并在 config.json 中尝试了这些 transformIgnorePatterns 表达式

"transformIgnorePatterns": [
  "\\node_modules\\@microsoft\\sp-dialog",
  "\\node_modules\\@microsoft\\sp-core-library",
  "node_modules/(?!sp-core-library)",
  "node_modules/(?!@microsoft/sp-core-library)"
],

他们都没有工作。我在 Windows 10 上运行它，所以我也尝试了 this 格式

【问题讨论】：

有人知道如何解决这个问题吗？就我而言，我有扩展 Vuetify 组件的组件（又名 import { VDataTable } from 'vuetify/lib'）。 JEST 文档严重缺乏这种复杂的配置。更实用、更常见的示例会有所帮助。
试试"@microsoft[/\\]sp-dialog" 或更可能的是"@microsoft[/\\\\]sp-dialog"。我相信这里需要双重转义。

标签： jestjs

【解决方案1】：

我在使用 jest、webpack 和 vanilla js 进行项目时遇到了类似的错误，因此当 jest 在任何 /*?.js$/ 文件中遇到这行代码 import '../css/styles.css'; 时会引发错误。

我通过将 jest 配置从 package.json 文件移动到具有以下最小配置的 jest.config.js 文件中解决了这个问题：

// jest.config.js
module.exports = 
  "moduleNameMapper": {
    "\\.(css|less|scss)$": "identity-obj-proxy"
  }
}

然后在babel.config.js:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
  ],
};

【讨论】：

【解决方案2】：

实际上，typescript 似乎不适用于 JEST 测试用例，所以我觉得要么 JEST 需要忽略这些文件，要么这些包需要转译为 JEST 可以理解的 js 代码，

你可以试试这个

"transformIgnorePatterns": [ "node_modules/(?!(@microsoft/sp-core-library))" ],

在 tsconfig.json 中

"allowJs": true,

【讨论】：

【解决方案3】：

我将此设置添加到我的配置中，但没有任何乐趣。仍然遇到与 Sergey Aslanvov 相同的错误。

"transformIgnorePatterns": [
  "/node_modules/(?!@vuetify)"
],

也试过

"transformIgnorePatterns": [
  "\\node_modules\\@vuetify",
],

下面是我扩展 VDataTable 的组件示例

import {
  Vue,
 Mixins,
 Component,
} from 'vue-property-decorator';

import { VDataTable } from 'vuetify/lib';

@Component
export class BPagedGrid extends Mixins(Vue, VDataTable) { }

【讨论】：

您使用的是哪个技术栈？是 react/react-native 吗？
Dipen Shah，我正在使用 VueJS v2
stackoverflow.com/questions/55071174/… 这个好像对我有用

【解决方案4】：

transformIgnorePatterns 表示如果测试路径匹配任何模式，则不会进行转换。

注意：不要分割多行。

开玩笑会默认忽略所有node_modules。

所以你必须这样写：

"transformIgnorePatterns": [
  // all exceptions must be first line
  "/node_modules/(?!@microsoft/sp-core-library|sp-dialog|other_libs_need_transform)"
],

【讨论】：