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

.eslintrc.js file being ignored with create react app and craco

Post author By Full Stack
Post date August 20, 2020
No Comments on .eslintrc.js file being ignored with create react app and craco

This has been working great for the last couple of years, but we just upgraded a slew of libraries and now eslint, when we run our app, is not referring to our eslintrc file. It’s throwing errors for rules that we have either disabled or set to warning. I can type junk into the eslintrc […]

Tags ... "jsx-a11y/anchor-is-valid": [ 2, ... "react/jsx-curly-newline": 0, '!src/**/*.stories.js', '!src/**/*.styles.js' ], '!src/registerServiceWorker.js', '/jest/global_mocks.js', '/jest/global_variables.js' ], 'src'), "@okta/okta-react": "^3.0.4", "@storybook/addon-actions": "^5.0.5", "@storybook/addon-knobs": "^5.0.6", "@storybook/addon-links": "^5.0.5", "@storybook/addons": "^5.0.5", "@storybook/react": "^5.0.5", "@testing-library/react": "^10.4.7", "axios": "^0.18.1", "browserslist": { "production": [ ">0.2%", "build-storybook": "build-storybook", "connected-react-router": "^6.7.0", "core-js": "^3.6.5", "cross-env": "^7.0.2", "debounce": "^1.2.0", "dependencies": { "@datadog/browser-rum": "^1.12.8", "deploy-build": "cross-env NODE_PATH=src env-cmd -f ./env/deploy-build craco build", "devDependencies": { "@craco/craco": "^5.6.4", "development": [ "last 1 chrome version", "env-cmd": "^10.1.0", "enzyme-adapter-react-16": "^1.15.2", "enzyme-to-json": "^3.5.0", "enzyme": "^3.11.0", "eol-last": 0, "eslint-config-airbnb": "^18.2.0", "eslint-plugin-import": "^2.22.0", "eslint-plugin-jsx-a11y": "^6.3.1", "eslint-plugin-react-hooks": "^4.1.0", "eslint-plugin-react": "^7.20.6", "extends": [ "airbnb", "fast-text-encoding": "^1.0.2", "focus-within-polyfill": "^5.0.4", "globals": { "_satellite": true }, "history": "^4.10.0", "ie >= 11" ] } } ], "ie 11" ] } } I suspect there's a library above I have to update but I'm not sure what else to update!, "jest-environment-jsdom": "^24.9.0", "jest-environment-node": "^24.9.0", "jest-localstorage-mock": "^2.4.0", "jest-sonar-reporter": "^2.0.0", "jest-styled-components": "^7.0.2", "jest": true }, "jshashes": "^1.0.7", "last 1 firefox version", "last 1 safari version" ] } }, "libxmljs": "^0.19.7", "lodash.groupby": "^4.6.0", "lodash.sortby": "^4.7.0", "moment-timezone": "^0.5.28", "moment": "2.24.0", "node-sass-chokidar": "^1.5.0", "not dead", "not op_mini all" ], "npm-link-shared": "^0.5.6", "parser": "babel-eslint", "private": true, "prop-types": "^15.6.2", "qs": "^6.5.2", "react-app-polyfill": "^1.0.6", "react-click-outside": "^3.0.1", "react-cursor-position": "^3.0.3", "react-dom": "^16.13.0", "react-easy-swipe": "0.0.17", "react-flexbox-grid": "^2.1.2", "react-html-parser": "^2.0.2", "react-inlinesvg": "^1.1.5", "react-lazyload": "^2.6.2", "react-number-format": "^4.0.5", "react-redux": "^7.2.0", "react-router-dom": "^5.1.0", "react-router": "^5.1.0", "react-scripts": "3.4.1" }, "react-slick": "^0.23.1", "react-sticky-el": "^1.0.20", "react-toastify": "^4.2.0", "react-transition-group": "^4.4.0", "react": "^16.13.0", "reactjs-popup": "^1.5.0", "redux-devtools-extension": "^2.13.8", "redux-logger": "^3.0.6", "redux-mock-store": "^1.5.3", "redux-thunk": "^2.3.0" }, "redux": "^4.0.0", "rules": { "comma-dangle": 0, "rxjs": "~6.5.5", "scripts": { "localxf": "cross-env NODE_PATH=src env-cmd -f ./env/localxf craco start", "semantic-ui-css": "^2.4.1", "semantic-ui-react": "^0.83.0", "settings": { "import/resolver": { "node": { "paths": [ "src" ] } } } } craco-config.js con, "slick-carousel": "^1.8.1", "smoothscroll-polyfill": "^0.4.3", "specialLink": [ "to" ] } ], "start": "cross-env NODE_PATH=src env-cmd -f ./env/local craco start --no-cache" }, "storybook": "cross-env NODE_PATH=src env-cmd -f ./env/local start-storybook -p 6006", "styled-components": "^5.1.1", "stylelint-config-sass-guidelines": "^5.3.0", "stylelint-webpack-plugin": "^0.10.5" }, "stylelint": "^9.10.1", "test:debug": "cross-env NODE_PATH=src craco test --runInBand --no-cache --env=jsdom", "test": "cross-env NODE_PATH=src craco test --env=jsdom", "use-clipboard-copy": "^0.1.1", "uuid": "^7.0.2" }, "version": "1.0.0", { "components": ["Link"], // this is one rule that I'm specifically chasing ... }, but we just upgraded a slew of libraries and now eslint, clearMocks: true } }, collectCoverageFrom: [ 'src/**/*.js', context: path.resolve(__dirname, coverageThreshold: { global: { branches: 60, eslint: { mode: ESLINT_MODES.file }, files: ['**/*.scss'] }) ] } }; local environment EXTEND_ESLINT=true REACT_APP_ENV=local ... package.json { "name": "search", functions: 70, is not referring to our eslintrc file. It's throwing errors for rules that we have either disabled or set to warning. I can type junk into th, it seems to ignore the eslintrc file. .eslintrc.js removed many rules for brevity module.exports = { "env": { "browser": true, lines: 80, snapshotSerializers: ['enzyme-to-json/serializer'], statements: 1 } }, testResultsProcessor: 'jest-sonar-reporter', This has been working great for the last couple of years, webpack: { plugins: [ new StyleLintPlugin({ configBasedir: __dirname, when we run our app

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

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