【问题标题】:Jasmine Spec Helpers not loadedJasmine Spec Helpers 未加载
【发布时间】:2017-09-15 18:01:47
【问题描述】:

我正在尝试在 Typescript 环境中使用 Jasmine 和 Karma 编写单元测试。

我已经安装了 karma、karma-typescript、karma-jasmine、jasmine 和 jasmine-ts。

我已将自定义 tsconfig.json 添加到 spec 目录并在 karma-typescript 设置中使用它。

一般来说,我的测试可以正常工作,但是它不会执行我的规范助手。

我是否缺少一些东西来执行我的规范助手?


供您参考,这是我的配置:

karma.conf.js:

    module.exports = function (config) {
        config.set({
    
            // base path that will be used to resolve all patterns (eg. files, exclude)
            basePath: '',
    
    
            // frameworks to use
            // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
            frameworks: ['jasmine', "karma-typescript"],
    
    
            // list of files / patterns to load in the browser
            files: [
                "spec/helpers/chai.ts",
                {pattern: "src/**/*.ts"},
                {pattern: "spec/**/*.ts"}
            ],
    
    
            // list of files to exclude
            exclude: [],
    
    
            // preprocess matching files before serving them to the browser
            // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
            preprocessors: {
                "src/**/*.ts": ["karma-typescript"],
                "spec/**/*.ts": ["karma-typescript"]
            },
    
            karmaTypescriptConfig: {
                bundlerOptions: {
                    entrypoints: /\.spec\.ts$/
                },
                tsconfig: "./spec/tsconfig.json",
                coverageOptions: {
                    exclude: [/\.(d|spec|test)\.tsx?/, /\/spec\//]
                }
            },
            specReporter: {
                maxLogLines: 3,             // limit number of lines logged per test
                suppressErrorSummary: true, // do not print error summary
                suppressFailed: false,      // do not print information about failed tests
                suppressPassed: false,      // do not print information about passed tests
                suppressSkipped: true,      // do not print information about skipped tests
                showSpecTiming: false,      // print the time elapsed for each spec
                failFast: false              // test would finish with error when a first fail occurs.
            },
            // test results reporter to use
            // possible values: 'dots', 'progress'
            // available reporters: https://npmjs.org/browse/keyword/karma-reporter
            reporters: ['spec', "karma-typescript", "kjhtml"],
    
    
            // web server port
            port: 9876,
    
    
            // enable / disable colors in the output (reporters and logs)
            colors: true,
    
    
            // level of logging
            // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
            logLevel: config.LOG_INFO,
    
    
            // enable / disable watching file and executing tests whenever any file changes
            autoWatch: true,
    
    
            // start these browsers
            // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
            browsers: ['Chrome'],
    
    
            // Continuous Integration mode
            // if true, Karma captures browsers, runs the tests and exits
            singleRun: false,
    
            // Concurrency level
            // how many browser should be started simultaneous
            concurrency: Infinity
        })
    }

jasmine.json(虽然我感觉没用过):

    {
      "spec_dir": "spec",
      "spec_files": [
        "**/*[sS]pec.ts"
      ],
      "helpers": [
        "helpers/**/*.ts"
      ],
      "stopSpecOnExpectationFailure": false,
      "random": false,
      "reporters": [
        {
          "name": "jasmine-spec-reporter#SpecReporter"
        }
      ],
      "project": "./spec/"
    }

tsconfig.json 在根目录中:

    {
      "compilerOptions": {
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
          "es6",
          "dom",
          "es2015.promise"
        ],
        "module": "commonjs",
        "target": "es5",
        "sourceMap": true,
        "outDir": "./dist/",
        "noImplicitAny": false,
        "allowJs": true,
        "baseUrl": "src",
        "typeRoots": [
          "node_modules/@types",
          "typings"
        ]
      },
      "include": [
        "src/**/*"
      ]
    }

tsconfig.json 在规范文件夹中:

    {
      "extends": "../tsconfig.json",
      "compilerOptions": {
        "typeRoots": [
          "../node_modules/@types",
          "typings"
        ]
      },
      "include": [
        "./**/*",
        "../src/**/*"
      ]
    }

spec/helpers/chai.ts 是 karma 未执行的规范助手。

该文件的内容是:

import * as chai from "chai";
import chaiThings = require("chai-things");
import chaiInterface = require("chai-interface");

chai.should();
chai.use(chaiThings);
chai.use(chaiInterface);

请参阅https://github.com/dhilgarth/mjt 了解独立示例。

【问题讨论】:

  • 如何运行测试?确切的命令行是什么?
  • karma start --single-runkarma start
  • 它确实在加载你的 chai.ts 助手吗?告诉 Karma 打开一个您可以与之交互的浏览器,例如Chrome、Firefox 等……一旦浏览器加载了 karma 运行器,打开开发工具并检查测试运行器是否正在网络面板上加载椅子助手。我注意到您明确声明 thar Karma 没有执行您的助手。只是想确认它至少先加载它。
  • @DanielLane:是的,它正在加载文件的编译版本 - 即 js 版本。

标签: typescript jasmine karma-runner karma-jasmine


【解决方案1】:

所以这里的问题是 Karma 配置有一个很容易遗漏的小错误配置。

Karma 配置的文件节点完全有效,并且匹配您希望 Karma 加载的所有测试规范。

karma 配置的 karmaTypescriptConfig 节点对 Karma 加载的文件应用额外的过滤器,在您的情况下,您只包括由 karma 加载的与 .spec.ts 文件匹配的文件。

捆绑器找不到帮助规范,因为它们与正则表达式模式不匹配:.spec.ts,即使它们是在文件节点下指定的。因此,辅助脚本在加载后被排除在测试之外。

解决此问题的方法是删除 karmaTypescriptConfig 节点,重新配置它以显式匹配助手或重命名助手以与给定匹配器匹配。

我已将其从以下示例中删除。打包器会默认打包 Karma 加载的所有文件。

官方文档说明

karmaTypescriptConfig.bundlerOptions.entrypoints - 过滤 Karma 加载的哪些文件应在测试运行中执行的正则表达式,例如仅以“.spec.ts”结尾的文件名:/.spec.ts$/。 此设置可用于确保规范在其他代码开始需要模块之前完成测试环境的设置,否则可能会导致由竞争条件引起的细微错误。 默认为所有文件,/.*/。

希望这会有所帮助!

karma.conf.js:

module.exports = function (config) {
	config.set({

		// base path that will be used to resolve all patterns (eg. files, exclude)
		basePath: '',

		// frameworks to use
		// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
		frameworks: ['jasmine', "karma-typescript"],

		// list of files / patterns to load in the browser
		files: [
			"spec/helpers/helper.ts", {
				pattern: "src/**/*.ts"
			}, {
				pattern: "spec/**/*.ts"
			}
		],

		client: {
			clearContext: false // leave Jasmine Spec Runner output visible in browser
		},

		// list of files to exclude
		exclude: [],

		// preprocess matching files before serving them to the browser
		// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
		preprocessors: {
			"spec/helpers/helper.ts": ["karma-typescript"],
			"src/**/*.ts": ["karma-typescript"],
			"spec/**/*.ts": ["karma-typescript"]
		},

		// test results reporter to use
		// possible values: 'dots', 'progress'
		// available reporters: https://npmjs.org/browse/keyword/karma-reporter
		reporters: ['progress', "karma-typescript"],

		// web server port
		port: 9876,

		// enable / disable colors in the output (reporters and logs)
		colors: true,

		// level of logging
		// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
		logLevel: config.LOG_INFO,

		// enable / disable watching file and executing tests whenever any file changes
		autoWatch: true,

		// start these browsers
		// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
		browsers: ['Chrome'],

		// Continuous Integration mode
		// if true, Karma captures browsers, runs the tests and exits
		singleRun: false,

		// Concurrency level
		// how many browser should be started simultaneous
		concurrency: Infinity
	})
}

【讨论】:

    【解决方案2】:

    目前唯一可行的选择是将帮助程序存储在单独的 forlder 中,使用 tsc 编译它们并将 .js 文件添加到 karma.config

    查看此 PR 以了解使其工作的步骤:https://github.com/dhilgarth/mjt/pull/1/files

        files: [
            {pattern: "spec/helpers/*.js"},
            {pattern: "src/**/*.ts"},
            {pattern: "spec/**/*.ts"}
        ],
    
        client:{
          jasmine: {
            helpers: [
              "spec/helpers/*.js"
            ]
          }
        },
    

    【讨论】:

    • 谢谢,但是,不,这没有帮助。 helpers 目录是包含tsconfig.json 的目录的子目录,因此包含在"./**/*" glob 中
    • 尝试在 karma config、files 部分、chai helper 之后和 src 和 specs 之前加载 helpers
    • 也这样做了。没有不同。此外,它已经包含在以 spec 开头的 glob 中
    • 让我们尝试另一种方式,它是如何为我工作的:业力配置加载 test.ts (github.com/valor-software/ngx-bootstrap/blob/…) ,test.ts 在其他所有内容之前加载匹配器 (github.com/valor-software/ngx-bootstrap/blob/…) ,其中匹配器是 ( github.com/valor-software/ngx-bootstrap/blob/…)
    • 我试图模仿它,但它仍然没有用。一个很大的区别是我使用 karma-typescript 而不是 angular cli 作为 preporcessor
    猜你喜欢
    • 1970-01-01
    • 2014-05-24
    • 2016-11-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-10-22
    • 2021-03-24
    • 2015-03-01
    相关资源
    最近更新 更多