Jests tests cannot execute imports inside circuit-ui components

[AndriyOnyshchenko]

First problem I faced is that imports from index file not working in tests (like this import { Toggle } from '@sumup/circuit-ui' ). In this case import statement returns undefined. I fixed it by changing path to import Toggle from '@sumup/circuit-ui/dist/es/components/Toggle/Toggle';

Right now jest cannot import modules inside circuit component /node_modules/@sumup/circuit-ui/dist/es/components/Toggle/Toggle.js:15 import React from 'react'; SyntaxError: Cannot use import statement outside a module

jest.config.js

module.exports = {
	testEnvironment: 'jest-environment-jsdom',
	moduleNameMapper: {
		'\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
			'<rootDir>/__mocks__/fileMock.js',
		'\\.(css|scss)$': '<rootDir>/test/__mocks__/styleMock.js',
		Components: '<rootDir>/client/static/react/components/',
		'^gfx/(.*)$': '<rootDir>/client/static/gfx/$1',
		'^shared/(.*)$': '<rootDir>/client/static/src/shared/$1',
		'^sales/(.*)$': '<rootDir>/client/static/src/sales/$1',
		'^src/(.*)$': '<rootDir>/client/static/src/$1',
		'^react/(.*)$': '<rootDir>/client/static/react/$1'
	},
	snapshotSerializers: ['enzyme-to-json/serializer'],
	setupFilesAfterEnv: ['<rootDir>/setup.enzyme.js'],
	testPathIgnorePatterns: ['.spec.js'],
	moduleDirectories: ['node_modules', 'src', 'react'],
	transform: {
		'^.+\\.(ts|tsx)?$': 'ts-jest',
		'^.+\\.(js|jsx)$': 'babel-jest',
		'^.+\\.svg$': 'jest-svg-transformer'
	}
};

babel.config.json

{
	"sourceType": "unambiguous",
	"plugins": [
		"@babel/plugin-proposal-function-bind",
		"@babel/plugin-proposal-export-default-from",
		"@babel/plugin-proposal-logical-assignment-operators",
		["@babel/plugin-proposal-optional-chaining", { "loose": false }],
		["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }],
		["@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }],
		"@babel/plugin-proposal-do-expressions",
		["@babel/plugin-proposal-decorators", { "legacy": true }],
		"@babel/plugin-proposal-function-sent",
		"@babel/plugin-proposal-export-namespace-from",
		"@babel/plugin-proposal-numeric-separator",
		"@babel/plugin-proposal-throw-expressions",
		"@babel/plugin-syntax-dynamic-import",
		"@babel/plugin-syntax-import-meta",
		["@babel/plugin-proposal-class-properties", { "loose": true }],
		"@babel/plugin-proposal-json-strings",
		"@babel/plugin-transform-modules-commonjs",
		"@babel/plugin-transform-runtime"
	],
	"presets": [
		"@babel/preset-env",
		"@babel/preset-react",
		"@babel/preset-typescript"
	]
}

package.json dependencies

	"dependencies": {
		"@babel/core": "7.10.1",
		"@babel/plugin-proposal-class-properties": "7.10.1",
		"@babel/plugin-proposal-decorators": "7.10.1",
		"@babel/plugin-proposal-do-expressions": "7.10.1",
		"@babel/plugin-proposal-export-default-from": "7.10.1",
		"@babel/plugin-proposal-export-namespace-from": "7.10.1",
		"@babel/plugin-proposal-function-bind": "7.10.1",
		"@babel/plugin-proposal-function-sent": "7.10.1",
		"@babel/plugin-proposal-json-strings": "7.10.1",
		"@babel/plugin-proposal-logical-assignment-operators": "7.10.1",
		"@babel/plugin-proposal-nullish-coalescing-operator": "7.10.1",
		"@babel/plugin-proposal-numeric-separator": "7.10.1",
		"@babel/plugin-proposal-optional-chaining": "7.10.1",
		"@babel/plugin-proposal-pipeline-operator": "7.10.1",
		"@babel/plugin-proposal-throw-expressions": "7.10.1",
		"@babel/plugin-syntax-class-properties": "7.10.1",
		"@babel/plugin-syntax-dynamic-import": "7.8.3",
		"@babel/plugin-syntax-export-default-from": "7.10.1",
		"@babel/plugin-syntax-import-meta": "7.10.1",
		"@babel/plugin-transform-modules-commonjs": "7.10.1",
		"@babel/plugin-transform-runtime": "7.10.1",
		"@babel/polyfill": "7.10.1",
		"@babel/preset-env": "7.10.1",
		"@babel/preset-react": "7.10.1",
		"@babel/preset-typescript": "^7.10.4",
		"@babel/register": "7.10.1",
		"@debitoor/accounting": "2.4.4",
		"@debitoor/billing-pricing": "0.1.4",
		"@debitoor/email-template": "1.2.3",
		"@debitoor/log": "6.1.1",
		"@debitoor/number-series": "1.2.5",
		"@debitoor/printify": "1.1.15",
		"@debitoor/service-log": "4.1.4",
		"@debitoor/service-url": "5.18.0",
		"@debitoor/taxrates": "1.37.0",
		"@emotion/core": "^10.0.28",
		"@emotion/styled": "^10.0.27",
		"@sumup/circuit-ui": "^2.0.0",
		"@sumup/collector": "^1.0.0-alpha.1",
		"@sumup/design-tokens": "^1.0.3",
		"@sumup/icons": "^1.0.1",
		"@sumup/intl": "^1.1.2",
		"@svgr/webpack": "4.3.3",
		"@types/enzyme": "^3.10.5",
		"@types/jest": "^26.0.9",
		"app-root-path": "3.0.0",
		"async": "2.0.1",
		"autoprefixer": "9.7.4",
		"babel-cli": "^6.26.0",
		"babel-core": "7.0.0-bridge.0",
		"babel-loader": "8.1.0",
		"before-build-webpack": "0.2.9",
		"browser-filesaver": "1.1.1",
		"classnames": "2.2.5",
		"clean-webpack-plugin": "3.0.0",
		"cnf": "3.3.3",
		"compression": "1.7.1",
		"copy-webpack-plugin": "5.1.1",
		"cors": "2.8.4",
		"css-loader": "3.4.2",
		"debitoor-alias-pattern": "git+ssh://[email protected]/debitoor/debitoor-alias-pattern.git#v1.0.1",
		"debounce": "1.0.0",
		"dompurify": "2.0.12",
		"dot-prop-immutable": "1.1.2",
		"ejs": "2.5.6",
		"email-address": "git+ssh://[email protected]/debitoor/email-address.git#v1.2.0",
		"emotion-theming": "^10.0.27",
		"enzyme": "^3.11.0",
		"enzyme-adapter-react-16": "^1.15.3",
		"enzyme-to-json": "^3.5.0",
		"event-stream": "3.3.4",
		"express": "4.16.1",
		"express-timeout-handler": "2.1.2",
		"file-loader": "5.0.2",
		"friendly-errors-webpack-plugin": "1.7.0",
		"glob-to-regexp": "0.4.0",
		"gulp": "4.0.2",
		"gulp-svg-sprite": "1.5.0",
		"html-webpack-plugin": "4.0.0-beta.11",
		"http-proxy": "1.18.1",
		"imports-loader": "0.7.1",
		"jest": "^26.4.0",
		"linear-depreciation": "git+ssh://[email protected]/debitoor/linear-depreciation.git#v1.2.2",
		"mini-css-extract-plugin": "0.9.0",
		"mobile-detect": "1.4.4",
		"mobx": "4.9.2",
		"mobx-react": "5.4.3",
		"mobx-react-form": "1.36.0",
		"moment": "2.20.1",
		"node-sass": "4.13.1",
		"nodeerrors": "2.1.2",
		"npm-run-all": "4.1.5",
		"optimize-css-assets-webpack-plugin": "5.0.3",
		"path-to-regexp": "6.1.0",
		"payment-terms": "1.0.2",
		"postcss-loader": "3.0.0",
		"prop-types": "15.6.1",
		"qs": "6.4.0",
		"raw-loader": "0.5.1",
		"react": "16.9.0",
		"react-color": "2.14.1",
		"react-dom": "16.9.0",
		"react-dropzone": "10.0.0",
		"react-markdown": "3.3.3",
		"react-onclickoutside": "6.9.0",
		"react-select": "1.2.1",
		"react-textarea-autosize": "7.1.0",
		"react-virtualized": "9.19.1",
		"request": "2.75.0",
		"request-retry-stream": "2.1.0",
		"resolve-url-loader": "3.1.1",
		"sass-loader": "6.0.6",
		"spark-md5": "3.0.1",
		"style-loader": "0.19.1",
		"svg-url-loader": "3.0.3",
		"svgo": "1.3.2",
		"svgo-loader": "2.2.1",
		"terser-webpack-plugin": "2.3.3",
		"trackjs": "3.6.0",
		"traverse": "0.6.6",
		"ts-jest": "^26.2.0",
		"typescript": "^3.9.7",
		"underscore": "1.4.4",
		"url-loader": "3.0.0",
		"validatorjs": "3.17.1",
		"webpack": "4.39.3",
		"webpack-cli": "3.3.10",
		"webpack-fix-style-only-entries": "0.4.0",
		"webpack-merge": "4.2.2",
		"whatwg-fetch": "2.0.1",
		"xtend": "4.0.1"
	},
	"devDependencies": {
		"@debitoor/eslint-config-debitoor": "3.0.2",
		"@debitoor/mocha-strict-dependencies": "1.1.0",
		"@debitoor/parse-dependencies": "1.0.1",
		"@debitoor/start-development-service": "1.3.0",
		"@debitoor/tenantmongo": "4.0.0",
		"@testing-library/cypress": "6.0.0",
		"babel-eslint": "10.1.0",
		"babel-jest": "26.0.1",
		"chai": "3.5.0",
		"chai-as-promised": "6.0.0",
		"chai-pretty-expect": "1.0.1",
		"chai-subset": "1.6.0",
		"cypress": "4.8.0",
		"eslint-config-prettier": "6.0.0",
		"eslint-plugin-cypress": "2.10.3",
		"eslint-plugin-prettier": "3.1.0",
		"eslint-plugin-react": "6.3.0",
		"husky": "4.2.3",
		"jasmine-core": "2.5.2",
		"jest-svg-transformer": "1.0.0",
		"karma": "3.1.1",
		"karma-chrome-launcher": "2.2.0",
		"karma-jasmine": "1.0.2",
		"karma-phantomjs-launcher": "1.0.4",
		"lint-staged": "10.1.2",
		"mocha": "7.2.0",
		"mocha-csslint": "2.0.0",
		"mocha-eslint": "6.0.0",
		"mocha-junit-reporter": "1.23.3",
		"mocha-multi-reporters": "1.1.7",
		"mockery": "1.7.0",
		"optimist": "0.6.1",
		"prettier": "1.19.1",
		"sinon": "1.17.6",
		"sinon-chai": "2.8.0",
		"start-server-and-test": "1.10.11",
		"test-data-bot": "0.8.0",
		"webpack-dev-server": "3.11.0"
	},

[connor-baer]

Thanks for filing an issue @AndriyOnyshchenko. Please use an issue template next time your file an issue — it ensures that all relevant information is included so that we can help you faster and the consistent format helps others to browse the issues.

It seems like Jest isn't able to parse the Circuit UI code, likely because we changed how it is transpiled in v2 (see the migration guide). Try including Circuit UI in Jest's transpilation by excluding it from the transformIgnorePatterns:

// jest.config.js
"transformIgnorePatterns": ["/node_modules/(?!@sumup).+\\.js$"]

From jestjs/jest#6229 (comment)

---

I fixed it by changing path to import Toggle from '@sumup/circuit-ui/dist/es/components/Toggle/Toggle';

You could try import Toggle from '@sumup/circuit-ui/dist/cjs/components/Toggle/Toggle'; (note the cjs) instead. However, using the absolute path to the component file has two major downsides: it prevents your bundler from choosing the best format (CJS vs ES) and this will break if the file structure in the /dist folder changes (which is likely to happen eventually).

[AndriyOnyshchenko]

@connor-baer I have added current line "transformIgnorePatterns": ["/node_modules/(?!@sumup).+\\.js$"] but it not helped.
About absolute path you are right, at some parts of application it fails. Thanks, didn't notice that.

So basically with imports from index jest gets undefined.

[connor-baer]

@AndriyOnyshchenko Hm, that's too bad. I would need to look at the code/project to be able to debug it further. Do you have a reproducible test case? Can you share the project?

[github-actions]

🎉 This issue has been resolved in version 2.1.0-canary.3 🎉

The release is available on:

• npm package (@canary dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[connor-baer]

Update for future reference: @AndriyOnyshchenko provided access to the project which enabled me to debug the issue further. It turned out the problem wasn't solved with the bugfix above.

Rather, it was the configuration for absolute import paths that was too greedy. It matched all imports starting with Components which included the ComponentsContext component from Circuit UI. Changing the config to only match imports from the Components/ folder fixed the issue:

jest.config.js

- Components: '<rootDir>/client/static/react/components/',`
+ '^Components/(.*)$': '<rootDir>/client/static/react/components/$1',

[github-actions]

🎉 This issue has been resolved in version 2.1.0-beta.1 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 2.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀