Jest transformIgnorePatterns无效

Question

我花了很长时间查看有关此问题的其他问题并查看Github上的其他项目，但似乎没有一个答案对我有用。

我正在我的项目中加载第三方库，当运行Jest测试时，我收到错误

export default portalCommunication;
^^^^^^

SyntaxError: Unexpected token export

> 1 | import portalCommunication from 'mathletics-portal-communication-service';

我尝试过多次更新我的Jest配置以使其转换为此库但我总是得到同样的错误。

这是我当前的jest.config.js文件：

module.exports = {
    moduleNameMapper: {
        '\\.(css|scss)$': 'identity-obj-proxy',
        '\\.svg$': '<rootDir>/test/mocks/svg-mock.js'
    },
    setupFiles: ['./test/test-setup.js'],
    transformIgnorePatterns: [
        '<rootDir>/node_modules/(?!mathletics-portal-communication-service)'
    ]
};

我还尝试添加transform属性来对这个mathletics-portal-communication-service目录运行babel-jest。

请帮忙！

Answer 1

作为现在的解决方法，我已将配置更改为使用moduleNameMapper选项为该库加载模拟类。我宁愿使用transformIgnorePatterns，所以仍然会欣赏任何想法。

新配置：

module.exports = {
    moduleNameMapper: {
        '\\.(css|scss)$': 'identity-obj-proxy',
        '\\.svg$': '<rootDir>/test/mocks/svg-mock.js',
        'mathletics-portal-communication-service': '<rootDir>/test/mocks/mathletics-portal-communication-service-mock.js'
    },
    setupFiles: ['./test/test-setup.js']
};

Answer 2

直到我将.babelrc更改为babel.config.js，transformIgnorePatterns才对我有用，就像这样：

module.exports = {
    "presets": [
        "@babel/preset-env"
    ]
};

对此评论可见：https://github.com/facebook/jest/issues/6229#issuecomment-403539460

Answer 3

可能是您使用rootDir。试试：

    "transformIgnorePatterns": [
      "node_modules/(?!(mathletics-portal-communication-service))"
    ]

Answer 4

我也遇到了这个问题。我正在使用 React Native，特别是 Ignite bowser 样板。

6 个测试失败，原因如下。

➜  my-project git:(feature/update-async-storage) ✗ npm run test

> my-project@0.0.1 test /Users/first.last/workdir/my-project
> jest

 PASS   iOS  app/services/api/api-problem.test.ts (6.106s)
 PASS   Android  app/services/api/api-problem.test.ts (6.136s)
 PASS   iOS  test/i18n.test.ts (6.169s)
 PASS   iOS  app/models/extensions/with-status.test.ts (6.199s)
 PASS   Android  app/utils/storage/storage.test.ts (6.213s)
 PASS   Android  app/models/extensions/with-status.test.ts (6.28s)
 PASS   iOS  app/utils/storage/storage.test.ts (6.355s)
 PASS   Android  test/i18n.test.ts (6.405s)
 PASS   iOS  app/models/feature-store/feature-store.test.ts (7.411s)
 PASS   Android  app/models/feature-store/feature-store.test.ts (7.408s)
 FAIL   Android  app/models/features/features.test.ts
  ● 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.

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

    Details:

    /Users/first.last/workdir/my-project/node_modules/graphql/error/GraphQLError.mjs:9
    import { printError } from './printError';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime._execModule (node_modules/jest-runtime/build/index.js:1157:58)
      at Object.<anonymous> (node_modules/@aws-amplify/api-graphql/src/GraphQLAPI.ts:13:1)

 FAIL   iOS  app/models/features/features.test.ts
  ● 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.

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

    Details:

    /Users/first.last/workdir/my-project/node_modules/graphql/error/GraphQLError.mjs:9
    import { printError } from './printError';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime._execModule (node_modules/jest-runtime/build/index.js:1157:58)
      at Object.<anonymous> (node_modules/@aws-amplify/api-graphql/src/GraphQLAPI.ts:13:1)

 FAIL   iOS  app/models/current-user/current-user.test.ts
  ● 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.

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

    Details:

    /Users/first.last/workdir/my-project/node_modules/graphql/error/GraphQLError.mjs:9
    import { printError } from './printError';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module
        at compileFunction (<anonymous>)

      at Runtime._execModule (node_modules/jest-runtime/build/index.js:1157:58)
      at Object.<anonymous> (node_modules/@aws-amplify/api-graphql/src/GraphQLAPI.ts:13:1)

 FAIL   Android  app/models/current-user/current-user.test.ts
  ● 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.

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

    Details:

    /Users/first.last/workdir/my-project/node_modules/graphql/error/GraphQLError.mjs:9
    import { printError } from './printError';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module
        at compileFunction (<anonymous>)

      at Runtime._execModule (node_modules/jest-runtime/build/index.js:1157:58)
      at Object.<anonymous> (node_modules/@aws-amplify/api-graphql/src/GraphQLAPI.ts:13:1)

 FAIL   iOS  test/storyshots.test.ts
  ● 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.

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

    Details:

    /Users/first.last/workdir/my-project/node_modules/node-fetch/lib/index.mjs:1
    import Stream from 'stream';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module
        at compileFunction (<anonymous>)

      at Runtime._execModule (node_modules/jest-runtime/build/index.js:1157:58)
      at Object.<anonymous> (node_modules/@storybook/core/dist/server/build-dev.js:31:41)

 FAIL   Android  test/storyshots.test.ts
  ● 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.

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

    Details:

    /Users/first.last/workdir/my-project/node_modules/node-fetch/lib/index.mjs:1
    import Stream from 'stream';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module
        at compileFunction (<anonymous>)

      at Runtime._execModule (node_modules/jest-runtime/build/index.js:1157:58)
      at Object.<anonymous> (node_modules/@storybook/core/dist/server/build-dev.js:31:41)

Test Suites: 6 failed, 10 passed, 16 total
Tests:       46 passed, 46 total
Snapshots:   0 total
Time:        28.163s
Ran all test suites in 2 projects.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-project@0.0.1 test: `jest`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the my-project@0.0.1 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/first.last/.npm/_logs/2021-02-09T16_54_36_584Z-debug.log

结论 @aws-amplify 正在使用 graphql 4 次失败的测试。 @storybook/core 的另外 2 个，因为它使用 node-fetch。

这是我的 jest.config.json

{
  "setupFilesAfterEnv": [
    "./jest.setup.js"
  ],
  "transformIgnorePatterns": [
    "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|native-base|@storybook|@aws-amplify|graphql|node-fetch)"
  ],
  "projects": [
    {
      "preset": "jest-expo/ios"
    },
    {
      "preset": "jest-expo/android"
    }
  ]
}

如您所见，我列出了 @storybook|@aws-amplify|graphql|node-fetch 所有这些。它仍然不起作用。这是我的 babel.config.js 和 tsconfig.json。

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  env: {
    production: {},
  },
  plugins: [
    [
      "@babel/plugin-proposal-decorators",
      {
        legacy: true,
      },
    ],
    ["@babel/plugin-proposal-optional-catch-binding"],
  ],
}

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "jsx": "react-native",
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "sourceMap": true,
    "lib": ["esnext"],
    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true,  /* Disallow inconsistently-cased references to the same file. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    "strict": true,                           /* Enable all strict type-checking options. */
    "resolveJsonModule": true,
    "isolatedModules": true,
    "baseUrl": "app",
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
  },
  "exclude": ["node_modules"],
  "include": ["App.js", "app", "test", "storybook", "jest.setup.js"]
}

这是我的 jest.setup.js 也是很好的衡量标准；

// Provides access to matchers https://github.com/testing-library/jest-native
import '@testing-library/jest-native/extend-expect'

jest.setTimeout(10000) // in milliseconds

如果有人知道为什么这个功能似乎不起作用，希望得到一些建议。

Answer 5

添加尾部斜杠为我解决这个问题：

{
    // ...
    transformIgnorePatterns: [
        '<rootDir>/node_modules/(?!mathletics-portal-communication-service/)'
    ]
};