Tag: snapshotSerializers: [‘enzyme-to-json/serializer’]

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”, […]

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

Development

Jest test passes locally but fails in azure devops

Post author By Full Stack
Post date February 14, 2020
No Comments on Jest test passes locally but fails in azure devops

I have a react application using react-scripts 3.2.0 This is my test : jest.mock(‘./../shared/utils/getRequestWithDispatchUsing’, () => ({ __esModule: true, default: () => () => () => () => ‘getRequestWithDispatchUsing is success’, })); describe(‘getContractsUsing’, () => { const dispatch = jest.fn(action => action); const fetch = jest.fn(); const clientNumber = ‘clientNumber’; beforeEach(() => { jest.clearAllMocks(); }); […]

Tags 'build'), 'index.js'), "!**/*.{stories.js, "!**/mocks/**", "!**/node_modules/**" ], "!/coverage/**", "!src/setupTests.js" ], "@storybook/addon-links": "^5.0.0", "@storybook/addons": "^5.0.0", "@storybook/react": "^5.0.0", "bluebird": "^3.5.2", "browserslist": [ ">0.2%", "classnames": "^2.2.5", "concurrently": "^3.5.0", "currency-formatter": "^1.4.2", "dependencies": { "analytics-js": "^0.2.0", "devDependencies": { "@storybook/addon-actions": "^5.0.0", "engines": { "node": ">=12.0.0", "enzyme-adapter-react-16": "^1.15.1", "enzyme-to-json": "^3.4.3", "enzyme": "^3.9.0", "eslint-config-airbnb": "=15.1.0", "eslint-config-prettier": "2.6.0", "eslint-plugin-import": "^2.8.0", "eslint-plugin-jsx-a11y": "^5.1.1", "eslint-plugin-prettier": "^2.3.1", "eslint-plugin-react": "^7.5.1", "eslintConfig": { "extends": "react-app" }, "husky": "^0.14.3", "ie >= 11" ] } } ], "istanbul": "^0.4.5", "jest-fetch-mock": "^2.1.2", "jest": { "collectCoverageFrom": [ "**/*.{js, "lint-staged": "^4.3.0", "lodash": "^4.17.15", "moment": "^2.22.1", "mw.validation": "^1.0.9", "node-sass": "^4.9.2", "not dead", "not op_mini all" ] } here's the log of the failing test in CI: getContractsUsing › should perform getRequestWithDispatchUsing expect(re, "npm": ">=6.0.0" }, "prettier": "^1.8.2", "private": true, "prop-types": "^15.6.1", "raf": "^3.4.0", "react-app-polyfill": "^1.0.5", "react-cookies": "^0.1.0", "react-datepicker": "~1.4.0", "react-dom": "^16.12.0", "react-moment-proptypes": "^1.5.0", "react-redux": "^5.0.5", "react-router-dom": "^4.1.1", "react-router": "^4.2.0", "react-scripts": "3.2.0" }, "react-scroll": "^1.7.9", "react-transition-group": "^2.2.1", "react": "^16.12.0", "recompose": "^0.26.0", "redux-mock-store": "^1.5.4", "redux-persist": "^5.9.1", "redux-thunk": "^2.2.0", "redux": "^3.6.0", "scripts": { "test": "react-scripts test --env=jsdom", "test-coverage": "react-scripts test --env=jsdom --coverage --watchAll=false", "url-search-params-polyfill": "^4.0.0" }, "version": "2.3.1", "webpack-bundle-analyzer": "^3.3.2", () => ({ __esModule: true, () => { 184 | const actualContract = getContractsUsing(fetch, () => { const actualContract = getContractsUsing(fetch, () => { const dispatch = jest.fn(action => action); const fetch = jest.fn(); const clientNumber = 'clientNumber'; beforeEach(, }, }; return getRequestWithDispatchUsing(fetch)({ url: apiContractsUrl, })(dispatch)(contractsRequested, })); describe('getContractsUsing', ares: '1.15.0', Body, brotli: '1.0.7', cldr: '35.1', clientNumber) => dispatch => { const apiContractsUrl = getContractsApiUrl(); const body = { customerNumber: clientNumber, clientNumber)(dispatch); 185 | expect(actualContract).toEqual('getRequestWithDispatchUsing is success'); |, clientNumber)(dispatch); expect(actualContract).toEqual('getRequestWithDispatchUsing is success'); }); }); And this is my functi, contractsReceived, contractsRequestFailed); }; The test works perfectly locally but fails in Azure DevOps. Although I'm installing the same dependencies in CI, default: () => () => () => () => 'getRequestWithDispatchUsing is success', demo.js}", featureName: SELECT_CONTRACTS_NAVIGATION, http_parser: '2.8.0', I have a react application using react-scripts 3.2.0 This is my test : jest.mock('./../shared/utils/getRequestWithDispatchUsing', icu: '64.2', jsx, llhttp: '1.1.4', modules: '72', napi: '5', nghttp2: '1.39.2', OpenSSL 1.1.1d, snapshotSerializers: ['enzyme-to-json/serializer'], tz: '2019c', unicode: '12.1', uv: '1.33.1', v8: '7.7.299.13-node.16', zlib: '1.2.11'

Development

“Navbar refers to a value, but is being used as a type here” when trying to render a shallow copy of my component when testing

I am trying to write a test to my React component, using TypeScript, Jest as my test runner and Enzyme for testing my React components. Whenever I pass my component into the shallow Enzyme function, I get the ts error “‘Navbar’ refers to a value, but is being used as a type here.”, and underneath […]

Tags "**/*.spec.ts", "**/*.test.ts"] } jest.config.ts: module.exports = { roots: ['/src'], "/js/**", "allowJs": true, "allowSyntheticDefaultImports": true, "dom.iterable", "ecmaFeatures": { "jsx": true } }, "esModuleInterop": true, "esnext" ], "forceConsistentCasingInFileNames": true, "include": [ "src" ], "isolatedModules": true, "jsx": "react" }, "lib": [ "dom", "module": "esnext", "moduleFileExtensions": [ "ts", "moduleResolution": "node", "parserOptions": { "ecmaVersion": 6, "resolveJsonModule": true, "skipLibCheck": true, "sourceType": "module", "strict": true, () => { expect(component).toMatchInlineSnapshot(); expect(component.length).toBe(1); expect(component).toBeTruthy();, () => { let component; beforeEach(() => { component = shallow(); // Error being desplayed here }); it('sho, }, }; Enzyme setup: import { configure } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import 'jest-enzyme'; configure({ adap, //"noEmit": true, all have the same error when being passed into the shallow function as arguments. I suspect it may have something to do with my TS configurat, and underneath I get eslint error "Parsing error: '>' expected". I tried it on some other components, but for the life of me I cannot seem to be finding a solution. Here's the code for Navbar.tsx: import React from 'react'; import { shallow, but is being used as a type here.", disableLifecycleMethods:, exclude: /node_modules/, I am trying to write a test to my React component, I get the ts error "'Navbar' refers to a value, Jest as my test runner and Enzyme for testing my React components. Whenever I pass my component into the shallow Enzyme function, json, jsx, node, setupTestFrameworkScriptFile: '/src/setupEnzyme.ts', snapshotSerializers: ['enzyme-to-json/serializer'], testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$', transform: { '^.+\\.tsx?$': 'ts-jest', ts=x, using TypeScript