为 Angular 配置 Jest

Posted 2023-03-08

【中文标题】为 Angular 配置 Jest

【英文标题】：Configure Jest for Angular

【发布时间】：2019-01-24 13:11:22

【问题描述】：

根据网络上的各种指南， 就像 this 一样简单：

ng new jest-test
cd jest-test
npm i -D jest jest-preset-angular

修改package.json：

"test": "jest",
[...]
"jest": 
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "./src/setup-jest.ts"
,

setup-jest.ts：

import 'jest-preset-angular';

在运行npm test 时，我一直遇到这个错误：

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain javascript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

jest-test/src/app/app.component.spec.ts:1
("Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest)import  TestBed, async  from '@angular/core/testing';
                                                                                                ^

SyntaxError: Unexpected token 

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

我尝试了无数种配置我在网络上找到的应用程序的变体，都产生了这个错误消息。

如果我需要提供更多信息，请告诉我。

【参考方案1】：

如果您使用 Angular CLI this 库将非常有帮助。 它将使您的工作区远离与 Jest 设置相关的样板代码，并使用 Angular CLI (ng test) 运行您的测试。 这也将省去您配置 Jest 的麻烦。

至于你的具体错误，很可能与你的tsconfig.spec.json有关。您是否将module 字段更改为commonjs？这是使 Jest 工作所必需的。

更多详情请阅读this文章。

免责声明：我是这个库的所有者。

【讨论】：

按照文章中建议的步骤使用 Angular 8，我仍然收到此错误：app.component.spec.ts:1 ("Object.":function(module,exports, require,__dirname,__filename,global,jest)import TestBed, async from '@angular/core/testing'; ^ SyntaxError: Unexpected token "module": "commonjs" is set

请在 Github 上以最少的复制打开一个问题。谢谢。

【参考方案2】：

几周前我尝试了这个article。

一切顺利，但我决定不从 Jasmine/Karma 转到 Jest。 原因：

我需要在多个真实浏览器上运行 UT，而 Jest 做不到。 （阅读Jest Repository上的讨论 我可以使用 Jasmin 编写使用 Protractor 或 Selenium-Webdriver 的 e2e 测试

【讨论】：

感谢您的回答。我也关注了这篇文章。他们基本上做同样的设置。对我不起作用。

【参考方案3】：

我使用 Ionic，并希望在 Ionic 4 和 Angular 6 中使用 Jest。我找到了this blog post from Brian Love，关注了它，并且能够掌握基础知识。附带说明一下，我在一个外部文件中配置了我的 Jest，内容显示在这里，因为我确实更改了一些东西，但是现在我的测试在 Angular 6 下使用 Jest 运行。

module.exports = 
    collectCoverage: true,
    collectCoverageFrom: [
        "src/**/*.ts"
    ],
    coverageDirectory: "<rootDir>/coverage/",
    coveragePathIgnorePatterns: [
        "node_modules",
        "test-config",
        "<rootDir>/src/app/interfaces",
        "jestGlobalMocks.ts",
        ".module.ts",
        "<rootDir>/src/app/main.ts"
    ],
    ,
    preset: "jest-preset-angular",
    roots: ['src'],
    setupTestFrameworkScriptFile: "<rootDir>/src/setup-jest.ts",
    transformIgnorePatterns: [
        "node_modules/(?!(@ionic-native|@ionic|angularfire2)/)"
    ]

【参考方案4】：

对我来说，在从头开始一个新的 Angular 项目后，我将其配置为使用 Jest 进行单元测试。我通过查看我的一个旧项目来构建配置，但它适用于 Angular 13 和 Jest 27。

我做了以下配置步骤。并非所有这些都是必需的，但要获得我所做的完整列表，请继续。

添加到package.json 到scripts：

"test": "jest  --coverage --config ./jest.config.js"

从package.json 中删除所有karma 依赖项。

添加到package.json 到devDependencies（你可能会得到更新的，这些对我来说是最新版本）：

"@babel/core": "~7.16.12",
"@babel/preset-env": "~7.16.11",
"@babel/preset-typescript": "~7.16.7",
"@types/jest": "~27.4.0",
"babel-jest": "~27.4.6",
"jest": "~27.4.7",
"jest-preset-angular": "~11.1.0",
"ts-jest": "~27.1.3",

在compilerOptions / types下添加到tsconfig.spec.ts：

"jest",
"node"

从tsconfig.spec.ts 下的files 中删除：

"src/test.ts"

删除文件src/test.ts。

添加jest.config.js：

module.exports = 
  globalSetup: 'jest-preset-angular/global-setup',
  cacheDirectory: "<rootDir>/jest/cache",
  clearMocks: true,
  collectCoverage: true,
  coverageDirectory: "<rootDir>/jest/report",
  globals: 
    "ts-jest": 
      tsconfig: "<rootDir>/tsconfig.spec.json",
    
  ,
  moduleFileExtensions: ["ts", "js", "json"],
  preset: "jest-preset-angular",
  setupFilesAfterEnv: ["<rootDir>/setup-jest.ts"],
  "transform": 
    "^.+\\.(ts|js)$": "ts-jest"
  ,
  verbose: true

添加babel.config.js:

module.exports = 
  presets: [
    ['@babel/preset-env',
      
        targets: 
          node: 'current'
        
      
    ],
    '@babel/preset-typescript',
  ]
;

运行npm i，你（希望）一切顺利。