javascript - 测试 React API - 意外的 token 错误

Question

我有一个使用 create-react-app 创建的基本 React 应用程序。我正在尝试开始使用 Pact使用 Javascript implementation guide 对我的 API 进行契约(Contract)测试.

我完全按照上面链接中的步骤创建了一个基本测试，它基本上什么都不做，只是为了让测试运行:

import { Pact } from '@pact-foundation/pact';

it('works', () => {
  expect(1).toEqual(1);
});

运行 npm run pactTest 时出现以下错误:

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:

/path/to/file.test.pact.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { Pact } from '@pact-foundation/pact';
                                                                                                ^

SyntaxError: Unexpected token {

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

如果我将导入行更改为:const Pact = require('@pact-foundation/pact'); 那么它就可以工作了。

问题是我不能使用 require 而不是 import 除了这个虚拟示例之外的任何东西，因为我使用 import all在 React 项目上。

自从 Javascript implementation guide 以来，我一定还缺少其他东西使用 import { Pact } from '@pact-foundation/pact';

Answer 1

在 jest.config.js 中的转换对象之后添加以下配置

  '^.+\\.js$': 'babel-jest

下面是你的引用示例

  module.exports = {
     moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
     transform: {
         '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
         'jest-transform-stub',
         '^.+\\.(js|jsx)?$': 'babel-jest'
     },
     moduleNameMapper: {
         '^@/(.*)$': '<rootDir>/src/$1'
     },
     snapshotSerializers: ['jest-serializer-vue'],
        testMatch: [
            '<rootDir>/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))'
     ],
     transformIgnorePatterns: ['<rootDir>/node_modules/']
  };