如何编写Jest的transformIgnorePatterns？

Question

我遇到了这个异常。

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的格式。

- Sergey Aslanov

---

有人知道如何解决这个问题吗？在我的情况下，我有一些扩展了Vuetify组件的组件（即import { VDataTable } from 'vuetify/lib'）。JEST文档在这个复杂的配置方面严重缺乏。更实用、常见的例子会很有帮助。 - RashadRivera

尝试使用"@microsoft[/\\]sp-dialog"或更可能的是"@microsoft[/\\\\]sp-dialog"。我认为这里需要进行双重转义。 - Estus Flask

Answer 1

transformIgnorePatterns 的意思是，如果测试路径与任何模式匹配，则不会进行转换。

注意：不要将多行拆分。

jset 默认会忽略所有的 node_modules。

因此，你必须这样写：

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

- Riceball LEE

Answer 2

实际上，似乎TypeScript与JEST测试用例不兼容，因此我认为要么JEST需要忽略这些文件，要么这些包需要转换为JEST可以理解的js代码。您可以尝试以下方法：

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

在tsconfig.json文件中

"allowJs": true,

请查看这篇文章以获取更多详细信息： https://github.com/SharePoint/sp-dev-docs/issues/2325#issuecomment-446416878

- Vinay Rajput

---

我只想强调一下这个答案中 tsconfig.json 中的 "allowJs": true。在我的情况下，这正是我所缺少的，而且没有人提到过。谢谢 @Vinay！ - Manu Artero

Answer 3

我在使用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',
        },
      },
    ],
  ],
};

- alfrednoble