Javascript 使用typescript获取纽约/伊斯坦布尔报道

我正在努力为我的typescript/mocha/gulp项目争取纽约/伊斯坦布尔的适当报道。我尝试了许多方法，其中一些方法似乎无法使用源代码映射，而另一些方法由于

ts node

/

tsc

错误而失败。我当前的设置是：

nyc

package.json中的相关配置

"scripts": {
    "test:coverage": "nyc npm run test:unit",
    "test:unit": "gulp mocha"
}
"nyc": {
    "check-coverage": true,
    "all": true,
    "extension": [
      ".js",
      ".jsx",
      ".ts",
      ".tsx"
    ],
    "include": [
      "src/**/!(*.test.*).[tj]s?(x)"
    ],
    "reporter": [
      "html",
      "lcov",
      "text",
      "text-summary"
    ],
    "report-dir": "docs/reports/coverage"
  }

{
  "compilerOptions": {
    "baseUrl": "./",
    "rootDir": "./src",
    "outDir": "./build",
    "allowJs": true,
    "module": "commonjs",
    "target": "es5",
    "lib": ["es5", "es6", "dom"],
    "sourceMap": true,
    "inlineSourceMap": false,
    "inlineSources": false,
    "experimentalDecorators": true,
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "jsx": "react",
    "moduleResolution": "node"
  },
  "exclude": [
    "docs",
    "tests",
    "**/*.test.js",
    "**/*.test.jsx",
    "**/*.test.ts",
    "**/*.test.tsx",
    "tools",
    "gulpfile.js",
    "node_modules",
    "build",
    "typings/main",
    "typings/main.d.ts"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useCache": true,
    "useBabel": true
  }
}

gulpfile.js

mocha

相关部分

const SRC_DIR = path.join(__dirname, 'src');
const SRC_FILES = path.join(SRC_DIR, '**', '*.[jt]s?(x)');
const TEST_FILES = path.join(SRC_DIR, '**', '*.test.[jt]s?(x)');
const MOCHA_CONFIG = {
    src: [
        TEST_FILES
    ],
    watchSrc: [
        SRC_FILES,
        TEST_FILES
    ],
    mocha: {
        // compilers: [
        //     'ts:ts-node/register',
        //     'tsx:ts-node/register'
        // ],
        require: [
            './tests/setup.js',
            'ignore-styles',
            'source-map-support/register'
        ]
    }
};
gulp.task('mocha', mocha(MOCHA_CONFIG));

tsconfig.json

"scripts": {
    "test:coverage": "nyc npm run test:unit",
    "test:unit": "gulp mocha"
}
"nyc": {
    "check-coverage": true,
    "all": true,
    "extension": [
      ".js",
      ".jsx",
      ".ts",
      ".tsx"
    ],
    "include": [
      "src/**/!(*.test.*).[tj]s?(x)"
    ],
    "reporter": [
      "html",
      "lcov",
      "text",
      "text-summary"
    ],
    "report-dir": "docs/reports/coverage"
  }

{
  "compilerOptions": {
    "baseUrl": "./",
    "rootDir": "./src",
    "outDir": "./build",
    "allowJs": true,
    "module": "commonjs",
    "target": "es5",
    "lib": ["es5", "es6", "dom"],
    "sourceMap": true,
    "inlineSourceMap": false,
    "inlineSources": false,
    "experimentalDecorators": true,
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "jsx": "react",
    "moduleResolution": "node"
  },
  "exclude": [
    "docs",
    "tests",
    "**/*.test.js",
    "**/*.test.jsx",
    "**/*.test.ts",
    "**/*.test.tsx",
    "tools",
    "gulpfile.js",
    "node_modules",
    "build",
    "typings/main",
    "typings/main.d.ts"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useCache": true,
    "useBabel": true
  }
}

使用上述设置，coverage会为所有文件生成结果，但TS文件的结果不正确，这很可能是因为未使用源映射（即，报告中没有显示注释行的覆盖率，并且数字似乎也错误）

由于尝试了许多不同的方法，但都没有成功，最常见的建议之一是将

“require”：[“ts node/register”]

添加到

nyc

配置中，但我收到了一些错误，例如

gulpfile.js

，

docs/reports/coverage/lcov report/prettify.js

和其他js文件的数量

不在“rootDir”下

这是正确的，但不清楚为什么

ts node

尝试处理

src

之外的所有文件，即使它们被排除在

tsconfig.json

中（配置仍然变得非常复杂）

---

如果您能给我一些建议，我将不胜感激。

最近，我发现了一个令人满意的解决方案，使用

“target”：“es6”

而不是

tsconfig.json

的

编译器选项中的
es5
。虽然直接在
tsconfig.json
中更改
target
可能不是一个选项，因为它会影响构建，但另一个技巧是使用
TS_节点_编译器_OPTIONS='{“target”：“es6”}
可以直接添加到
package.json
脚本中，例如：

"test:coverage": "TS_NODE_COMPILER_OPTIONS='{\"target\":\"es6\"}' nyc npm run test:unit",

其中
test:unit
是用于运行实际测试的任何方式（在我的例子中，就是
gulpmocha
）

注意：我还将
nyc
更新为最新的11.1.0版本，并将
ts节点
更新为
3.3.0
，正如线程上建议的那样
我不确定这是否是相同的问题，但我将把它放在这里，以防对未来的开发人员有所帮助

直到我在我的
package.json
的nyc部分添加了
exclude after remap=false
，我才获得任何覆盖率数据

这是列出的，但不是以一种非常突出的方式（IMO）。
由于许多更改打破了旧的工作设置，我创建了一个详细的示例项目，涵盖typescript+mocha+nyc，支持对非调用文件的适当覆盖（这通常不包括在示例中）以及一些使用最新版本的单元测试示例和质量检查

我在去摩卡8+纽约15+的时候遇到了一些问题。也许这也会帮助其他人跌跌撞撞


如果您只对覆盖范围感兴趣，请检查.ncyrc.yml和mocharc.yml以及package.json中的调用配置。VsCode启动配置还包括：

.nycrc.yml

extends: "@istanbuljs/nyc-config-typescript"

reporter:
  - html
  - lcovonly
  - clover
  # those 2 are for commandline outputs
  - text
  - text-summary
report-dir: coverage

莫查克·伊梅尔先生

require:
  - ts-node/register
  - source-map-support/register
recursive: true
color: true
exit: true
extension:
  - ts
  - test.ts

package.json中的测试作业

"test": "npm run lint && nyc mocha src test",

使用覆盖率设置正确的测试有时会很麻烦。我停止使用Mocha/Istanbul进行React Typescript项目，转而使用Jest和ts Jest（），这是伊斯坦布尔必需的，以及React测试所需的所有物品。这对我来说是一个跨不同版本的稳定堆栈。感谢您的建议！虽然这实际上是我考虑的因素之一，但我是否正确？它可能需要重写，因为
jest
不同于
mocha
？mocha测试很容易重写为jest。删除d描述部分并将其（）更改为test（）。断言也不同。但前后部分是相同的。需要一些时间，但不会太长…以及如何适合（或与mocha/sinon/chai相比）为非反应性内容编写测试？这和mocha一样简单！当我得到“ES5/ES3中的异步函数或方法需要'Promise'构造函数。请确保您有'Promise'构造函数的声明，或在
--lib
选项中包含'ES2015'错误。”