Skip to the content
OnooksOnooks
Software Development Company
  • Categories
  • My account
  • OOKS Project
  • Ask Onooks
  • Shop
  • Mastering Development
    • Linux
      • Ubuntu
    • System & Network
    • CMS
      • WordPress
      • Drupal
      • Joomla
      • Magento
    • Game Development
  • User Help
    • Apple
    • Android
    • Web Apps
    • Web Pro
    • Raspberry Pi
  • Cryptocurrency
    • Bitcoin
    • Ethereum
  • Ask
    • Games
      • Board Games
      • RPG Games
      • Video & Online Games
    • Engineering
    • Biology
    • Chemistry
    • Mathematics
  • Archives
    • 2020
      • April 2020
      • March 2020
      • February 2020
      • January 2020
    • 2019
      • December 2019
      • November 2019
      • October 2019
      • September 2019
  • Categories
  • My account
  • OOKS Project
  • Ask Onooks
  • Shop
Categories
Development

Jest encountered an unexpected token – React with jest and enzyme

  • Post author By Full Stack
  • Post date March 6, 2020
  • No Comments on Jest encountered an unexpected token – React with jest and enzyme

tsconfig.json

{
    "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"]
}

.babelrc file

{
    "env": {
      "test": {
        "plugins": [
          "@babel/plugin-transform-modules-commonjs"
        ]
      }
    }
  }

Package.json

{
  "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": [
      "<rootDir>/ConsumptionSummaryComponent/src"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/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": [
      "<rootDir>/ConsumptionSummaryComponent/src/setupEnzyme.ts"
    ],
    "globals": {
      "ts-jest": {
        "tsConfig": "tsconfig.json",
        "babelConfig": "<rootDir>/ConsumptionSummaryComponent/.babelrc",
        "diagnostics": {
          "ignoreCodes": [
            "TS1149"
          ]
        }
      }
    },
    "collectCoverage": true,
    "coverageReporters": ["lcov"],
    "coverageDirectory": "test-coverage",
    "collectCoverageFrom": [
      "<rootDir>/ConsumptionSummaryComponent/src/components/**/*.{ts,tsx}",
      "<rootDir>/ConsumptionSummaryComponent/src/services/**/*.{ts,tsx}"
    ],
    "coverageThreshold": {
      "global": {
      "branches": 0,
      "functions": 0,
      "lines": 0,
      "statements": 0
      }
    },
    "moduleNameMapper": {
      "ts-jest": "<rootDir>/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": "<rootDir>/ConsumptionSummaryComponent/src/blank-mock",
      "^style-loader.*$": "<rootDir>/ConsumptionSummaryComponent/src/blank-mock",
      "^.*.svg$": "<rootDir>/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"
  }
}

SetupEnzyme.ts

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

testcase

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", () => {
    const result = shallow(<SummaryComponent {...testProp} />);
    expect(result).toMatchSnapshot();
});

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:

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

It is working in other system but not in my system. Every thing is latest in my system.
Kindly help me with the issue

  • Tags '^.+\\.tsx?$': 'ts-jest' }, "^.*.svg$": "/src/blank-mock.js" }, "^.+\\.jsx$": "ts-jest" }, "^style-loader.*$": "/ConsumptionSummaryComponent/src/blank-mock", "@babel/preset-env": "^7.8.4", "@common-pcf/sdk": "file:../sdk/common-pcf-sdk-1.0.0.tgz", "@graphql-codegen/introspection": "1.12.1", "@graphql-codegen/typescript-operations": "1.12.1", "@graphql-codegen/typescript-react-apollo": "1.12.1", "@graphql-codegen/typescript": "1.12.1", "@microsoft/applicationinsights-web": "^2.3.1", "@types/enzyme-adapter-react-16": "1.0.6", "@types/enzyme": "3.10.5", "@types/jest": "^25.1.1", "@types/node": "^10.12.18", "@types/powerapps-component-framework": "^1.2.0", "@types/react-dom": "^16.9.5", "@types/react": "^16.9.19", "@uifabric/fluent-theme/lib/": "@uifabric/fluent-theme/lib-commonjs/", "@uifabric/icons": "^7.3.2", "@uifabric/styling/lib/": "@uifabric/styling/lib-commonjs/", "/ConsumptionSummaryComponent/src/services/**/*.{ts, "/js/**", "allowJs": true, "allowSyntheticDefaultImports": true, "apollo-boost": "^0.4.7", "babel-jest": "^25.1.0", "babelConfig": "/ConsumptionSummaryComponent/.babelrc", "clean": "pcf-scripts clean", "collectCoverage": true, "collectCoverageFrom": [ "/ConsumptionSummaryComponent/src/components/**/*.{ts, "compilerOptions": { "typeRoots": ["node_modules/@types"], "ConsumptionSummaryComponent/globals.d.ts"], "coverageDirectory": "test-coverage", "coverageReporters": ["lcov"], "coverageThreshold": { "global": { "branches": 0, "cra-template-typescript": "^1.0.0", "dependencies": { "@apollo/react-hooks": "^3.1.3", "description": "Project containing your PowerApps Component Framework (PCF) control.", "devDependencies": { "@babel/core": "7.8.4", "diagnostics": { "ignoreCodes": [ "TS1149" ] } } }, "enzyme-adapter-react-16": "^1.15.2", "enzyme-to-json": "3.4.4", "enzyme": "^3.11.0", "esModuleInterop": true, "exclude": ["./node_modules/pcf-scripts/./node_modules"] } .babelrc file { "env": { "test": { "plugins": [ "@ba, "expose-loader\\?jQuery\\!jquery": "/ConsumptionSummaryComponent/src/blank-mock", "forceConsistentCasingInFileNames": true, "functions": 0, "globals": { "ts-jest": { "tsConfig": "tsconfig.json", "graphql-tag": "^2.10.2", "graphql": "^14.6.0", "include": ["./ConsumptionSummaryComponent/src", "isolatedModules": true, "jest": "^25.1.0", "jest": { "roots": [ "/ConsumptionSummaryComponent/src" ], "lines": 0 } }, "module": "esnext", "moduleFileExtensions": [ "ts", "moduleNameMapper": { "ts-jest": "/node_modules/ts-jest", "moduleResolution": "node", "office-ui-fabric-react": "^7.84.0", "office-ui-fabric-react/lib/": "office-ui-fabric-react/lib-commonjs/", "pcf-scripts": "^1", "pcf-start": "^1", "react-dom": "^16.12.0", "react": "^16.12.0", "rebuild": "pcf-scripts rebuild", "resolveJsonModule": true, "scripts": { "build": "pcf-scripts build", "setupFiles": [ "/ConsumptionSummaryComponent/src/setupEnzyme.ts" ], "skipLibCheck": true, "source-map-loader": "^0.2.4", "sourceMap": true, "start": "pcf-scripts start", "statements": 0 } }, "test:watch": "jest --watch" }, "test": "jest", "transform": { "^.+\\.js$": "/node_modules/babel-jest", "ts-jest": "25.1.0", "ts-loader": "^6.2.1" } } SetupEnzyme.ts import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; configure({, "version": "1.0.0", "webpack-cli": "^3.3.10", "webpack": "^4.41.5" } }, () => { const result = shallow(); expect(result).toMatchSnapshot(); }); Error Jest encountered an, e.g. it's not plain JavaScript. By default, iconName: Enums.ProductTypeLogo.azureLogo, iconStyle: styles.AzureIcon, if Jest sees a Babel config, ignoring "node_modules". Here's what you can do: • To have some of your "node_modules" files transformed, isEnabled:true, it will use that to transform your files, json, jsx, node, order: 1 }; it("Should render the Summary component for the test Product Group Summary", productGroupName: Enums.ProductTypeName.azureProductTypeName, snapshotSerializers: ['enzyme-to-json/serializer'], testEnvironment: 'node', testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$', ts=x, tsconfig.json { "extends": "./node_modules/pcf-scripts/tsconfig_base.json", you can specify a custom "transformIgnorePatterns" in your config. • If you need a custom transformation specify a "transform" option in you

← Iterate and extract nested members → Run a .sql file in rake task

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Search
  • Archives
  • Authors
  • Phemex
  • Codes
  • Promo
  • ByBit
  • Ref
  • Rollbit
  • Privacy
  • Contact

CC 3.0 2021 Onooks

Roadmap

To the top ↑ Up ↑