Unit Testing is one of the essential tools every developer should use. However, I have seen many projects making it difficult to carry out this as a practice. There are many reasons for this. For example, some might say they need to focus on feature development, and writing Unit Tests is quite an additional effort. Others might say it’s challenging to test the code that we write because it’s complicated. In either of these cases, you are missing the point.

html" title=单元测试>单元测试是每个开发人员都应使用的基本工具之一。 但是，我看到许多项目使这种做法难以实施。 这件事情是由很多原因导致的。 例如，有些人可能会说他们需要专注于功能开发，而编写html" title=单元测试>单元测试是一项额外的工作。 其他人可能会说，测试我们编写的代码很困难，因为它很复杂。 在这两种情况下，您都没有抓住重点。

I can recall a saying that, think of whether you have time to write Unit Tests at first place or spare time to work on the same code twice later on due to bugs and issues.

我可以回想起一句话，考虑一下由于错误和问题，您是否有时间首先编写html" title=单元测试>单元测试，还是有空闲时间稍后再编写两次相同的代码。

编写可测试的代码 (Writing Testable Code)

First of all, let’s find out what are the common mistakes we do, which makes it challenging to test our code. Since I will be focusing on the frontend testing, one of the most common issues in front and code that I have seen is that it’s challenging to test the UI components. The main mistake I have seen here is that if the components become too smart, having dependencies on different code segments such as API calls, loading data, handling event operations, dealing with business logic. I have seen many developers getting frustrated writing in tests for these “heavy” components.

首先，让我们找出我们犯下的常见错误，这使得测试我们的代码具有挑战性。 由于我将专注于前端测试，因此我看到的前端和代码中最常见的问题之一就是测试UI组件具有挑战性。 我在这里看到的主要错误是，如果组件变得太聪明，则依赖于不同的代码段，例如API调用，加载数据，处理事件操作，处理业务逻辑。 我已经看到许多开发人员对于这些“繁重的”组件的测试感到沮丧。

The easiest solution for this is to separate the components into logic and presentation. Having this separation allows us to test the view components for presentation logic, event handling, and visualization while focusing on testing other pieces of business logic separately.

最简单的解决方案是将组件分为逻辑和表示。 有了这种分离，我们可以测试视图组件的表示逻辑，事件处理和可视化，同时专注于分别测试其他业务逻辑。

Making your components testable is also a good way to make sure they are independent, reusable, and shareable. That’s absolutely crucial, especially when sharing components between projects using popular tools and platforms like Bit (Github). As a matter of fact, Bit will render and test your components in isolation before pushing them to your shared collection, to make sure they are truly reusable — otherwise, there’s no point in sharing them.

使组件可测试也是确保它们独立，可重用和共享的好方法。 这绝对至关重要，尤其是在使用流行工具和平台(例如Bit ( Github ))在项目之间共享组件时。 实际上，在将组件推入共享集合之前，Bit将隔离渲染和测试您的组件，以确保它们真正可重用-否则，共享它们毫无意义。

不编写html" title=单元测试>单元测试的恶性循环 (The Vicious Cycle of Not Writing Unit Tests)

From my experience, when I talk to teams, those who don’t practice Unit Tests properly (using coverage as a measurement) either start late or started in the beginning but not followed it as a practice. There could be many reasons behind this, but I will present a few examples, which will help you to see whether your case fits one of these.

根据我的经验，当我与团队交谈时，那些没有正确进行html" title=单元测试>单元测试(使用覆盖率作为衡量标准)的人要么开始得很晚，要么开始时就开始了，但没有遵循它。 这可能有很多原因，但是我将提供一些示例，这些示例将帮助您了解您的案例是否适合其中之一。

开发时我们如何测试代码 (How we test our code when developing)

In my opinion, unless we follow Test Driven Development (TDD), we likely develop the functionality by keeping the frontend loaded to the browser. We have the focus to visualize the functionality and interactions with the user interface (UI) at the heart of frontend development.

我认为，除非遵循测试驱动开发(TDD)，否则我们可能会通过将前端加载到浏览器来开发功能。 我们的重点是可视化前端开发的核心功能以及与用户界面(UI)的交互。

Then only, the focus comes to write Unit Testing, once the functionality is working.

然后，一旦功能开始工作，重点便放在编写html" title=单元测试>单元测试上。

Here the main challenge we face is that Unit Test writing is an additional step that we do after completing the functionalities. This approach creates the mentality that a Unit Test is extra work on top of working functionality.

在这里，我们面临的主要挑战是html" title=单元测试>单元测试编写是完成功能之后我们要做的另一步骤。 这种方法使人们想到，html" title=单元测试>单元测试是除了工作功能之外的额外工作。

This mindset creates an issue for product owners, as well as developers, to think about it as an overhead.

这种思维方式为产品所有者以及开发人员带来了一个问题，使他们将其视为开销。

However, if you follow TDD, it’s the other way around. Since we write the test cases upfront, we don’t necessarily have to look through visualizing the changes all the time and has a different mean of verifying the code while developing. Here, writing code to pass the Unit Test Case itself is the primary verification.

但是，如果您遵循TDD，则完全相反。 由于我们是预先编写测试用例的，因此我们不必一直通过可视化方式查看更改，而不必在开发过程中采用不同的方式来验证代码。 在这里，编写代码以通过html" title=单元测试>单元测试用例本身是主要的验证。

Therefore I feel, having the practice to follow TDD is a crucial step in practicing Unit Tests.

因此，我认为，遵循TDD的练习是练习html" title=单元测试>单元测试的关键步骤。

html" title=单元测试>单元测试的运行频率 (How often the Unit Tests Runs)

You might wonder how does The execution of Unit Test affect writing Unit Tests. For instance, imagine that you have a complete test suit. But you run it once in a while. What happens eventually is that developers won’t see its value often enough. Besides, even when we figure out a test is breaking, it’s too late. Then the responsibility of who has broken the Unit Test slips through our fingers.

您可能想知道执行html" title=单元测试>单元测试对编写html" title=单元测试>单元测试有何影响。 例如，假设您有完整的测试服。 但是您偶尔运行一次。 最终发生的事情是，开发人员不会经常看到其价值。 此外，即使我们确定测试已失败，也为时已晚。 然后，谁破坏了html" title=单元测试>单元测试的责任就越过我们的手指。

Therefore it’s essential to execute the Unit Tests at least at Pull request build time. Following these DevOps practices will ensure that each new code block added is tested against the Unit Test suit. Even if there’s a need for change for this case, the developer will do that before the code is merged.

因此，至少在请求请求构建时执行html" title=单元测试>单元测试非常重要。 遵循这些DevOps惯例将确保针对html" title=单元测试>单元测试套件对添加的每个新代码块进行测试。 即使在这种情况下需要更改，开发人员也会在合并代码之前进行更改。

您多久测量一次覆盖率 (How often do you measure the coverage)

Similarly to test execution, this is also an import measurement both psychologically as well as a practice for developers to know whether they are writing enough test cases to cover the code they have written.

与测试执行类似，这在心理上也是重要的衡量标准，也是开发人员了解他们是否正在编写足够的测试用例以覆盖他们编写的代码的一种实践。

In this case, I believe having a dashboard to see the Unit Test coverage is not enough. But if we could establish a measurement when we add new code to verify coverage, that would be a better alternative to get instant feedback. We could even establish rules requiring that the coverage should be, for example, about 80% for any new code added. The best place to add this evaluation is the Pull Request, build process.

在这种情况下，我相信拥有一个仪表板来查看html" title=单元测试>单元测试的覆盖范围是不够的。 但是，如果我们可以在添加新代码以验证覆盖率时建立度量，那将是获得即时反馈的更好选择。 我们甚至可以建立规则，要求对于所添加的任何新代码，其覆盖率应例如约为80％。 添加此评估的最佳位置是“拉取请求”构建过程。

Since developers get instant feedback on their code in terms of Unit Test coverage, they are empowered to take action to keep up with the coverage at all times.

由于开发人员可以获得有关html" title=单元测试>单元测试覆盖率的即时代码反馈，因此他们有权采取行动以始终保持覆盖率。

从这个周期出来 (Coming out from this cycle)

If you’re already in the vicious cycle, the best way to come out of it is to establish these practices discussed above. Since both of these practices talk about running your test frequently to verify the new code added as well as to test the coverage of new code, you can establish the procedure for any new code additions or modifications.

如果您已经处于恶性循环中，那么摆脱这种情况的最佳方法就是建立上面讨论的这些做法。 由于这两种做法都涉及经常运行测试以验证添加的新代码以及测试新代码的覆盖范围，因此您可以为添加或修改任何新代码建立过程。

It’s highly unlikely you can get a good enough time to complete the coverage for old code (unless the project is new) at once before you write any new code. So don’t think this will ever happen, since its not vible in terms of business value.

在编写任何新代码之前，您几乎不可能有足够的时间一次完成旧代码的覆盖范围(除非项目是新的)。 因此，不要以为这会发生，因为就商业价值而言，这是不可行的。

In the meantime, you can take periodic measurements to add coverage for the old code with a strategy in mind. And most importantly, you need to make the buying of all the developers to commit to this practice. It is equally important not to consider it as an overhead and communicate to all stakeholders the importance of writing Unit Tests. Otherwise, especially non-technical people might see it as an additional effort that could be used to develop new functionality.

同时，您可以进行定期测量，以考虑策略的方式增加对旧代码的覆盖范围。 最重要的是，您需要购买所有开发人员才能致力于这种做法。 同样重要的是，不要将其视为开销，并与所有利益相关者交流编写html" title=单元测试>单元测试的重要性。 否则，特别是非技术人员可能会将其视为可用于开发新功能的额外工作。

那么，做所有这些事情的真正价值是什么？ (So what is the real value of doing all these)

Many values come with Unit Tests. If done right, it will help to reduce defects in code, acts as a shield to verify existing functionalities are not broken when we do code refactoring, as well as to keep overall productivity high.

html" title=单元测试>单元测试附带许多值。 如果做得正确，它将有助于减少代码中的缺陷，充当盾牌，以确保我们在进行代码重构时不会破坏现有功能，并保持较高的整体生产率。

And you all know that when we see a code with a good Unit Test coverage, how confident are we about the code.

大家都知道，当我们看到具有良好html" title=单元测试>单元测试覆盖率的代码时，我们对代码有多自信。

So let’s start on filling these gaps and come back to the track, by establishing the DevOps practices as well as writing proper Unit Tests, following Test Driven Development.

因此，让我们开始建立这些差距，并通过建立DevOps实践以及遵循测试驱动开发来编写适当的html" title=单元测试>单元测试，回到正轨。

If you have any questions, feel free to post them in the comments below. Cheers!

如有任何疑问，请随时在下面的评论中发布。 干杯!

学到更多 (Learn More)