Testing React API - Unexpected Token error

Question

I have a basic React app created using create-react-app. I am trying to get started with Pact to do contract testing on my API using the Javascript implementation guide.

I have followed the steps in the above link exactly and have created a basic test which essentially does nothing just so I can get the test to run:

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

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

When running npm run pactTest I get the following error:

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)

If I change the import line to: const Pact = require('@pact-foundation/pact'); then it works.

The problem is that I can't use require instead of import for anything more than this dummy example, because I use import all over the React project.

There must be something else that im missing, since the Javascript implementation guide uses import { Pact } from '@pact-foundation/pact';

Answer 1

Add below config right after transform object in jest.config.js

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

Below is the example for your ref

  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/']
  };