No puedo ejecutar pruebas Jest en mis componentes ya que no puede cargar archivos html. me sale este error:
Error: Error: connect ECONNREFUSED 127.0.0.1:80Seguido por:
Unhandled Promise rejection: Failed to load landing.component.htmlEjecutar pruebas sin componentes está bien.
Aquí está mi jest.config.js
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */ module.exports = { preset: "jest-preset-angular", testEnvironment: "jsdom", setupFilesAfterEnv: ["<rootDir>/setup-jest.ts"], globals: { "ts-jest": { tsconfig: "<rootDir>/tsconfig.spec.json", stringifyContentPathRegex: "\\.(html|svg)$", }, }, snapshotSerializers: [ "jest-preset-angular/build/serializers/html-comment", "jest-preset-angular/build/serializers/ng-snapshot", "jest-preset-angular/build/serializers/no-ng-attributes", ], moduleDirectories: ["node_modules", "."], testMatch: ["**/+(*.)+(spec|test).+(ts|js)?(x)"], transform: { "^.+\\.(ts|js|html)$": "ts-jest", }, resolver: "@nrwl/jest/plugins/resolver", moduleFileExtensions: ["ts", "js", "html"], coverageReporters: ["html"], }; Mi setup-jest.ts
import 'jest-preset-angular/setup-jest'; Y mi tsconfig.spec.json
{ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/spec", "module": "commonjs", "types": ["jest", "node"], "allowJs": true, "esModuleInterop": true, "emitDecoratorMetadata": true }, "files": ["setup-jest.ts"], "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] } Y la parte de Jest de angular.json
"test": { "builder": "@nrwl/jest:jest", "options": { "jestConfig": "jest.config.js", "passWithNoTests": true } }Estoy usando Angular 12.2.7, Jest 27.2.4, jest-preset-angular 10.0.1 y ts-jest 27.0.5.
Esta respuesta me ayudó a resolver este problema. Como se desaconsejan las respuestas de solo enlace, a continuación he incluido la respuesta original de bnjmnhnndrsn .
Encontré este problema específico recientemente y la creación de su propio preprocesador de transformación lo resolverá. Esta fue mi configuración:
paquete.json
"jest": { "moduleFileExtensions": [ "js", "html" ], "transform": { "^.+\\.js$": "babel-jest", "^.+\\.html$": "<rootDir>/test/utils/htmlLoader.js" } }NOTA: babel-jest normalmente se incluye de forma predeterminada, pero si especifica un preprocesador de transformación personalizado, parece que tiene que incluirlo manualmente.
prueba/utils/htmlLoader.js:
const htmlLoader = require('html-loader'); module.exports = { process(src, filename, config, options) { return htmlLoader(src); } }