title: Jest encountered an unexpected token - React with jest and enzyme
body: <p><strong>tsconfig.json</strong></p>
  
  <pre><code>{
      "extends": "./node_modules/pcf-scripts/tsconfig_base.json",
      "compilerOptions": {
          "typeRoots": ["node_modules/@types"],
          "allowJs": true,
          "skipLibCheck": true,
          "esModuleInterop": true,
          "allowSyntheticDefaultImports": true,
          "forceConsistentCasingInFileNames": true,
          "module": "esnext",
          "moduleResolution": "node",
          "resolveJsonModule": true,
          "isolatedModules": true,
          "sourceMap": true
      },
      "include": ["./ConsumptionSummaryComponent/src", "ConsumptionSummaryComponent/globals.d.ts"],
      "exclude": ["./node_modules/pcf-scripts/./node_modules"]
  }
  </code></pre>
  
  <p><strong>.babelrc file</strong></p>
  
  <pre><code>{
      "env": {
        "test": {
          "plugins": [
            "@babel/plugin-transform-modules-commonjs"
          ]
        }
      }
    }
  </code></pre>
  
  <p><strong>Package.json</strong></p>
  
  <pre><code>{
    "name": "pcf-project",
    "version": "1.0.0",
    "description": "Project containing your PowerApps Component Framework (PCF) control.",
    "scripts": {
      "build": "pcf-scripts build",
      "clean": "pcf-scripts clean",
      "rebuild": "pcf-scripts rebuild",
      "start": "pcf-scripts start",
      "test": "jest",
      "test:watch": "jest --watch"
    },
    "jest": {
      "roots": [
        "&lt;rootDir&gt;/ConsumptionSummaryComponent/src"
      ],
      "transform": {
        "^.+\\.js$": "&lt;rootDir&gt;/node_modules/babel-jest",
        "^.+\\.tsx?$": "ts-jest",
        "^.+\\.jsx$": "ts-jest"
      },
      "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
      "moduleFileExtensions": [
        "ts",
        "tsx",
        "js",
        "jsx",
        "json",
        "node"
      ],
      "testEnvironment": "node",
      "setupFiles": [
        "&lt;rootDir&gt;/ConsumptionSummaryComponent/src/setupEnzyme.ts"
      ],
      "globals": {
        "ts-jest": {
          "tsConfig": "tsconfig.json",
          "babelConfig": "&lt;rootDir&gt;/ConsumptionSummaryComponent/.babelrc",
          "diagnostics": {
            "ignoreCodes": [
              "TS1149"
            ]
          }
        }
      },
      "collectCoverage": true,
      "coverageReporters": ["lcov"],
      "coverageDirectory": "test-coverage",
      "collectCoverageFrom": [
        "&lt;rootDir&gt;/ConsumptionSummaryComponent/src/components/**/*.{ts,tsx}",
        "&lt;rootDir&gt;/ConsumptionSummaryComponent/src/services/**/*.{ts,tsx}"
      ],
      "coverageThreshold": {
        "global": {
        "branches": 0,
        "functions": 0,
        "lines": 0,
        "statements": 0
        }
      },
      "moduleNameMapper": {
        "ts-jest": "&lt;rootDir&gt;/node_modules/ts-jest",
        "office-ui-fabric-react/lib/": "office-ui-fabric-react/lib-commonjs/",
        "@uifabric/fluent-theme/lib/": "@uifabric/fluent-theme/lib-commonjs/",
        "@uifabric/styling/lib/": "@uifabric/styling/lib-commonjs/",
        "expose-loader\\?jQuery\\!jquery": "&lt;rootDir&gt;/ConsumptionSummaryComponent/src/blank-mock",
        "^style-loader.*$": "&lt;rootDir&gt;/ConsumptionSummaryComponent/src/blank-mock",
        "^.*.svg$": "&lt;rootDir&gt;/src/blank-mock.js"
      },
      "snapshotSerializers": [
        "enzyme-to-json/serializer"
      ]
    },
    "dependencies": {
      "@apollo/react-hooks": "^3.1.3",
      "@common-pcf/sdk": "file:../sdk/common-pcf-sdk-1.0.0.tgz",
      "@microsoft/applicationinsights-web": "^2.3.1",
      "@types/node": "^10.12.18",
      "@types/powerapps-component-framework": "^1.2.0",
      "@uifabric/icons": "^7.3.2",
      "apollo-boost": "^0.4.7",
      "cra-template-typescript": "^1.0.0",
      "enzyme": "^3.11.0",
      "graphql": "^14.6.0",
      "graphql-tag": "^2.10.2",
      "office-ui-fabric-react": "^7.84.0",
      "react": "^16.12.0",
      "react-dom": "^16.12.0",
      "webpack": "^4.41.5",
      "webpack-cli": "^3.3.10"
    },
    "devDependencies": {
      "@babel/core": "^7.8.4",
      "@babel/preset-env": "^7.8.4",
      "@graphql-codegen/introspection": "1.12.1",
      "@graphql-codegen/typescript": "1.12.1",
      "@graphql-codegen/typescript-operations": "1.12.1",
      "@graphql-codegen/typescript-react-apollo": "1.12.1",
      "@types/enzyme": "3.10.5",
      "@types/enzyme-adapter-react-16": "1.0.6",
      "@types/jest": "^25.1.1",
      "@types/react": "^16.9.19",
      "@types/react-dom": "^16.9.5",
      "babel-jest": "^25.1.0",
      "enzyme-adapter-react-16": "^1.15.2",
      "enzyme-to-json": "3.4.4",
      "jest": "^25.1.0",
      "pcf-scripts": "^1",
      "pcf-start": "^1",
      "source-map-loader": "^0.2.4",
      "ts-jest": "25.1.0",
      "ts-loader": "^6.2.1"
    }
  }
  </code></pre>
  
  <p><strong>SetupEnzyme.ts</strong></p>
  
  <pre><code>import { configure } from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';
  
  configure({ adapter: new Adapter() });
  </code></pre>
  
  <p><strong>testcase</strong></p>
  
  <pre><code>import * as React from "react";
  import { shallow } from "enzyme";
  import { DataModel } from "../../utils/DataModel";
  import { styles } from "../../utils/style";
  import { Enums } from "../../utils/enums";
  import SummaryComponent from "../SummaryComponent";
  
  const testProp: DataModel.ProductGroupSummaryViewModel = {
      consumptionText: "300 Subscriptions . 200 Active . $500 ACR",
      iconName: Enums.ProductTypeLogo.azureLogo,
      iconStyle: styles.AzureIcon,
      productGroupName: Enums.ProductTypeName.azureProductTypeName,
      isEnabled:true,
      order: 1
  };
  
  it("Should render the Summary component for the test Product Group Summary", () =&gt; {
      const result = shallow(&lt;SummaryComponent {...testProp} /&gt;);
      expect(result).toMatchSnapshot();
  });
  </code></pre>
  
  <p><strong>Error</strong></p>
  
  <p>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.</p>
  
  <pre><code>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:\DemandResponse\CSM-RCMND-DIGI-DigExp-UXWidgets\CSM-RCMND-DIGI-DigExp-UXWidgets\msp_RecommendationComponentSolution\ConsumptionSummaryComponent\ConsumptionSummaryComponent\src\setupEnzyme.ts:1
  import { configure } from 'enzyme';
  ^^^^^^
  
  SyntaxError: Cannot use import statement outside a module
  </code></pre>
  
  <p>It is working in other system but not in my system. Every thing is latest in my system.
  Kindly help me with the issue</p>