npm i和npm_让您的NPM套件包含Jest和Codecov☂️

npm i和npm

by Carl-Johan Kihl

卡尔·约翰·基尔(Carl-Johan Kihl)

让您的NPM套件包含Jest和Codecov☂️ (Get your NPM-package covered with Jest and Codecov ☂️)

介绍 (Introduction)

Let’s talk about code coverage, and how you can do coverage reports in Jest and Codecov.

让我们讨论一下代码覆盖率，以及如何在Jest和Codecov中进行覆盖率报告。

什么是代码覆盖率？ (What is Code Coverage?)

If you’re familiar with testing. You know its main purpose:

如果您熟悉测试。 您知道它的主要目的：

Tests gives the developers freedom to make changes and refactor code with the confidence that everything should work fine as long as all the automated tests will pass.

测试使开发人员可以自由地进行更改和重构代码，并确信只要所有自动测试都能通过，一切就可以正常工作。

However, if the unit tests don’t cover all scenarios, there’s still a chance your changes can break something. That’s why we have Code coverage: the measure of how much of the code-base is covered by automated tests.

但是，如果单元测试不能涵盖所有情况，则您的更改仍有可能破坏某些东西。 这就是我们具有代码覆盖率的原因：自动化测试覆盖了多少代码库。

Without Code coverage analysis, your tests have lost their main purpose.

没有代码覆盖率分析，您的测试将失去其主要目的。

This is important when your project grows and many developers are involved.

当您的项目不断增长并且涉及许多开发人员时，这一点很重要。

✅ We can maintain quality of our test when new code is added. ✅ We get a deeper understanding of existing tests.✅ Give developers confidence to refactor code without worrying about breaking things. ✅ We can catch untested flows before they cause trouble.

when添加新代码后，我们可以保持测试质量。 ✅我们对现有测试有更深入的了解。✅使开发人员有信心重构代码，而不必担心会破坏代码。 ✅我们可以在未经测试的流量造成麻烦之前将其捕获。

Ok, now that we know what code coverage is, let’s implement it! ?

好的，现在我们知道什么是代码覆盖率，让我们实现它！ ？

先决条件 (Prerequisites)

To keep this article short and concise, I will start here: Step by Step Building and Publishing and NPM Typescript Package.

为了使本文简短明了，我将从这里开始： 逐步构建和发布以及NPM Typescript软件包 。

What’s been done so far:

到目前为止已完成的工作：

✅ Setup a basic NPM-package✅ Add testing with Jest✅ Write a basic test

✅设置基本的NPM软件包 J用Jest添加测试✅编写基本测试

If you have your project already setup with Jest you’re good to go. ? If not, I recommend that you clone or fork the repository for this article to start off from a basic NPM-package foundation:

如果您已经使用Jest设置了项目，那就很好了。 ？ 如果不是这样，建议您从本文的NPM软件包基础上开始克隆或构建本文的存储库：

git clone git@github.com:caki0915/my-awesome-greeter.git && cd my-awesome-greeter &&git checkout basic-package && npm install

If you’re interested how to build NPM packages, I recommend my previous article here.

如果您对如何构建NPM软件包感兴趣，建议在此推荐上一篇文章 。

Alright, now when everything is set up, let’s go!

好了，现在一切就绪，就开始吧！

在Jest中创建Coverage报告 (Create Coverage reports in Jest)

Creating coverage reports in Jest is easy. Just add this line in your jest config file:

在Jest中创建覆盖率报告很容易。 只需在您的jest配置文件中添加以下行：

"collectCoverage":true

collectCoverage: Should be set to true if you want jest to collect coverage information while running your tests. (Tests will run a little bit slower so it’s false by default.)

collectCoverage：如果希望在运行测试时开玩笑地收集覆盖率信息， 则应将其设置为true。 (测试运行会慢一些，因此默认情况下为假。)

Make sure your script command test in your package.json file will run Jest with your config file.

确保package.json文件中的脚本命令test将与配置文件一起运行Jest。

“test”: “jest --config jestconfig.json”

Alright! Run npm test in your terminal, and voilà! You will have a new folder with code coverage files generated for you.

好的！ 运行npm test 在您的终端上，瞧！ 您将拥有一个新文件夹，其中包含为您生成的代码覆盖率文件。

Don’t forget to add the coverage folder to .gitignore. We don’t want build-files in our repository. ?

不要忘记将coverage文件夹添加到.gitignore 。 我们不希望在我们的存储库中生成文件。 ？

使您的报告有用 (Make something useful of your reports)

Ok, that’s cool, we generated a folder with some files, but what should we do with this information? ?

好的，这很酷，我们生成了一个包含一些文件的文件夹，但是该如何处理这些信息？ ？

First of all, you can manually review the coverage-report on a generated HTML-page. Open /coverage/lcov-report/index.html in your browser:

首先，您可以在生成HTML页面上手动查看覆盖率报告。 在浏览器中打开/coverage/lcov-report/index.html ：

Ok, that’s nice, but do we REALLY need to manually review the reports on every build??

好的，这很好，但是我们真的需要在每个构建版本上手动查看报告吗？

No, you shouldn’t. You should publish the reports online to make something useful of them. In this article, we’re going to use a coverage reporting tool called codecov.io.

不，你不应该。 您应该在线发布报告以使它们有用。 在本文中，我们将使用一个称为codecov.io的覆盖率报告工具。

Codecov is free for open-source projects. It takes code coverage reports to the next level. With Codecov, we can also auto-generate badges and run it on continuous integration builds. (More on it later.)

Codecov对于开源项目是免费的。 它会将代码覆盖率报告提高到一个新水平。 借助Codecov，我们还可以自动生成徽章并在持续集成构建中运行它。 (稍后会有更多信息。)

Sign up at https://codecov.io/ and follow the guide to connect to Github and your repository. After that, you should end up seeing a screen like this:

在https://codecov.io/上注册，然后按照指南连接到Github和您的存储库。 在那之后，您应该最终看到如下屏幕：

Nice! For now, this page will be empty since you haven’t uploaded any reports yet, so let’s fix that. In the terminal, run:

真好！ 目前，该页面将为空，因为您尚未上传任何报告，因此，请修复此问题。 在终端中，运行：

npm install --save-dev codecov

Normally you want to upload reports at the end of a continuous integration build, but for this article, we will upload the reports from our local machine. In the terminal run: (Replace <Your token> with your repository-token found in codecov.io)

通常，您希望在持续集成构建结束时上载报告，但是对于本文，我们将从本地计算机上载报告。 在终端运行中：( 用在编解码器 ov.io中找到的存储库令牌替换<您的令牌> )

./node_modules/.bin/codecov --token="<Your token>"

Success! Now you can view your report online in codecov.io.? ?

成功！ 现在，您可以在codecov.io中在线查看报告。 ？

https://codecov.io/gh/<Github Username>/<Repository Name>/

将徽章添加到您的README.md (Add a Badge to your README.md)

Badges are important, especially for NPM packages. It gives the first impression of high quality when you see a beautiful code coverage badge in npmjs and Github.

徽章很重要，尤其是对于NPM软件包。 当您在npmjs和Github中看到漂亮的代码覆盖徽章时，它会给人以高质量的第一印象。

In your README.md add the following line:(Replace <Github Username>, <Repository Name> and <Branch Name> with your information)

在您的README.md中添加以下行：( 用您的信息替换<Github用户名>，<存储库名称>和<分支名称> )

[![Codecov Coverage](https://img.shields.io/codecov/c/github/<Github Username>/<Repository Name>/&lt;Branch Name>.svg?style=flat-square)](https://codecov.io/gh/<Github Username>/<Repository Name>/)

In my case, it will look like this:

就我而言，它将如下所示：

[![Codecov Coverage](https://img.shields.io/codecov/c/github/caki0915/my-awesome-greeter/coverage.svg?style=flat-square)](https://codecov.io/gh/caki0915/my-awesome-greeter/)

Awesome! Now you can show the rest of the world that you are using unit-testing and code coverage reports! ? ?

太棒了！ 现在，您可以向世界其他地方显示正在使用单元测试和代码覆盖率报告！ ？ ？

摘要 (Summary)

If you’re using tests, code coverage reporting is a must and it should run every-time you make a pull-request or make changes on your branches.

如果您正在使用测试，那么代码覆盖率报告是必须的，并且每次您执行拉取请求或在分支机构进行更改时都应运行。

You can find my NPM-starter package here on Github.It’s an educational base for best practices NPM-package development. Comments, Forks and PR’s are welcome. ?

您可以在Github上找到我的NPM-starter软件包。 它是NPM软件包开发最佳实践的教育基础。 欢迎评论，Forks和PR。 ？

下一步是什么？ (What’s next?)

If you don’t use continuous integration (CI) yet, it’s time to set it up. In my next article, I’m going to cover continuous integration with code-coverage for NPM packages.

如果您尚未使用持续集成(CI)，则该进行设置了。 在我的下一篇文章中，我将介绍NPM软件包的代码覆盖范围的持续集成。

If you find this article useful, please give it some claps and follow me for more articles about development.

如果您觉得本文有用，请鼓掌并关注我，以获取有关开发的更多文章。

祝您建立很棒的包裹好运！ ？ ？ (Good luck building your awesome package! ? ?)

翻译自: https://www.freecodecamp.org/news/get-your-npm-package-covered-with-jest-and-codecov-9a4cb22b93f4/

npm i和npm