karma-runner / karma-runner/karma

karma config not loading with angular 13

Open
#3,854 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12k
Forks
1.7k
PR merge metrics
No merged PRs in 30d

Description

I have recently upgraded to version 13 of angular. I’m able to build the project successfully but running tests gives the below issues,

Here is package.json dependencies

```
"devDependencies": {
"@angular-builders/jest": "^13.0.4",
"@angular-devkit/build-angular": "~13.3.9",
"@angular-devkit/build-ng-packagr": "~0.1002.4",
"@angular-devkit/core": "^13.3.9",
"@angular-eslint/builder": "13.5.0",
"@angular-eslint/eslint-plugin": "13.5.0",
"@angular-eslint/eslint-plugin-template": "13.5.0",
"@angular-eslint/schematics": "13.5.0",
"@angular-eslint/template-parser": "13.5.0",
"@angular/animations": "13.3.11",
"@angular/cdk": "13.3.9",
"@angular/cli": "13.3.9",
"@angular/common": "13.3.11",
"@angular/compiler": "13.3.11",
"@angular/compiler-cli": "13.3.11",
"@angular/core": "13.3.11",
"@angular/forms": "13.3.11",
"@angular/language-service": "13.3.11",
"@angular/material": "13.3.9",
"@angular/platform-browser": "13.3.11",
"@angular/platform-browser-dynamic": "13.3.11",
"@angular/router": "13.3.11",
"@babel/core": "^7.10.4",
"@commitlint/cli": "9.1.1",
"@commitlint/config-conventional": "9.1.1",
"@compodoc/compodoc": "^1.1.11",
"@storybook/addon-a11y": "6.1.15",
"@storybook/addon-actions": "6.1.15",
"@storybook/addon-docs": "6.1.15",
"@storybook/addon-essentials": "6.1.15",
"@storybook/addon-knobs": "6.1.15",
"@storybook/addons": "6.1.15",
"@storybook/angular": "6.1.15",
"@types/common-tags": "1.8.0",
"@types/d3-scale": "2.1.1",
"@types/glob": "^7.1.1",
"@types/jasmine": "3.5.11",
"@types/karma": "5.0.0",
"@types/lodash": "4.14.172",
"@types/markdown-to-jsx": "^7.0.1",
"@types/node": "^16.4.1",
"@types/promptly": "1.1.28",
"@types/puppeteer": "3.0.1",
"@types/resize-observer-browser": "^0.1.7",
"@types/sass": "^1.43.1",
"@types/segment-analytics": "^0.0.32",
"@types/tmp": "^0.2.0",
"@types/webgl2": "^0.0.6",
"@types/webpack-env": "^1.15.2",
"@typescript-eslint/eslint-plugin": "5.44.0",
"@typescript-eslint/parser": "5.44.0",
"assemblyscript": "0.9.1",
"autoprefixer": "^8.1.0",
"axios": "0.19.2",
"babel-loader": "^8.1.0",
"commitizen": "4.1.2",
"common-tags": "1.8.0",
"core-js": "^3.8.2",
"cz-conventional-changelog": "3.2.0",
"d3-scale": "3.2.1",
"downlevel-dts": "0.10.1",
"eslint": "^8.28.0",
"glob": "^7.1.6",
"hammerjs": "^2.0.8",
"highcharts": "9.0.1",
"husky": "4.2.5",
"jasmine": "3.5.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"jest": "^28.1.3",
"jest-environment-jsdom": "28.1.3",
"jest-preset-angular": "12.1.0-next.0",
"karma": "~6.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"karma-junit-reporter": "2.0.1",
"karma-spec-reporter": "0.0.32",
"karma-teamcity-reporter": "1.1.0",
"lerna": "3.22.1",
"lodash": "4.17.21",
"ng-packagr": "^13.3.1",
"prettier": "2.0.5",
"pretty-quick": "2.0.1",
"promptly": "3.0.3",
"puppeteer": "5.0.0",
"query-ast": "^1.0.3",
"react": "^16.6.0",
"react-dom": "^16.6.0",
"regenerator-runtime": "^0.13.5",
"rxjs": "^7.4.0",
"sass": "^1.43.1",
"scss-parser": "^1.0.4",
"slnodejs": "^4.0.286",
"storybook-addon-compodoc": "1.0.2",
"stylelint": "13.6.1",
"stylelint-config-recommended-scss": "4.2.0",
"stylelint-scss": "3.18.0",
"tmp": "0.2.1",
"ts-jest": "28.0.3",
"ts-node": "^10.4.0",
"tslib": "^2.0.0",
"typescript": "~4.6.4",
"zone.js": "~0.11.4"
},
```

Below is the error while running the tests

`An unhandled exception occurred: Error in config file!
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /karma.config.ts
require() of ES modules is not supported.
require() of /karma.config.ts from /node_modules/karma/lib/config.js is an ES module file as it is a .ts file whose nearest parent package.json contains "type": "module" which defines all .ts files in that package scope as ES modules.
Instead change the requiring code to use import(), or remove "type": "module" from package.json.`

removing “type”: “module” from package.json gives below error

`SyntaxError: Cannot use import statement outside a module`

tried converting karma config file to .mjs and it below error

`Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/ptalsani/Desktop/ui-kit-upgrade/ui-kit/projects/appd/common/karma.config.mjs`

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the test command with the package.json dependencies and the referenced karma.config.ts file. Inspect how Karma loads the TypeScript configuration when package.json declares "type": "module", then verify the configuration can load and the tests proceed without either reported module error.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, javascript, typescript
Domain
testing-qa
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.