测试 React & Redux 应用良心指南 #3370

jonjia · 2018-03-04T04:34:55Z

译文翻译完成，resolve #3342

zephyrJS · 2018-03-04T05:52:43Z

@leviding 校对认领

fanyijihua · 2018-03-04T05:52:45Z

@zephyrJS 好的呢 🍺

zephyrJS

@jonjia @leviding
翻译的太棒了！

zephyrJS · 2018-03-04T07:18:22Z

TODO/genuine-guide-to-testing-react-redux-applications.md


-Before we start, let’s talk about what aspects of components are worth testing. We obviously can’t test if the component looks pleasant. However, we should definitely test if certain conditional elements are in fact displayed or not; or whether performing some action on a component (not to be confused with Redux actions) results in the function passed in the component’s props being called.
+在我们开始之前，让我们先谈谈组件为什么需要测试。我们显然无法测试组件是否好看。但是，我们绝对应该测试某些条件性的元素是否能成功显示；或者对组件执行某些操作（不是 redux 中的 action），通过组件 props 传递的方法是否会被调用。


这里应该翻译成组件有哪些方面能否被测试。以便承接下文有些不值得测试，有些需要。
[让我们先谈谈组件为什么需要测试] => [让我们先谈谈组件有哪些方面值得被测试]

zephyrJS · 2018-03-04T08:02:15Z

TODO/genuine-guide-to-testing-react-redux-applications.md


-Instead of testing building blocks separately and in detail, we’ll now bundle them together and put them in a black box. We don’t care anymore how the stuff inside works. What happens in the component, stays in the component. That’s why integration tests are so resilient and refactor-proof. **You can switch the entire underlying mechanism without the need to update the test.**
+我们现在将它们捆绑在一起并放在一个黑盒子中，而不是单独和详细地测试构建块。我们不再关心内部是如何工作的。组件中会发生什么，停留在组件中。 这就是为什么集成测试非常有弹性和方便重构的原因。**你可以切换整个底层机制而无需更新测试。**


‘停留在组件中’ 感觉有点过于直译，‘stays in the component’ 这里应该也是意味着关注组件内部。所以这里应该承接上句来翻译会好一些。
[组件中会发生什么，停留在组件中] => [或是组件内部究竟发生了什么]

zephyrJS · 2018-03-04T08:32:36Z

TODO/genuine-guide-to-testing-react-redux-applications.md


-Simply start with integration tests. It’s very likely that you won’t feel the urge to implement a single unit test in your project. That means your complexity isn’t divided between building blocks, and it’s perfectly fine. You’ll save quite some time. On the other hand, there are systems that will leverage the power of unit tests. There is room for both.
+只需要从集成测试开始。你很可能觉得不会在你的项目中实施一个单元测试。这意味着你的复杂性不会在构建块之间划分，而且非常好。你会节省很多时间。另一方面，有些系统会利用单元测试的能力。两者都有空间。


[两者都有空间]=>[两者各有用武之地]
或则
[两者都有空间]=>[两者各有所长]

goldEli · 2018-03-04T08:52:18Z

校对认领

fanyijihua · 2018-03-04T08:52:20Z

@goldEli 妥妥哒 🍻

goldEli

@jonjia 辛苦了。
译文中很多直译的问题，读起来比较拗口，也容易产生歧义。个人建议，在保证作者原意的情况下，让译文更符合中文的阅读习惯和逻辑。

goldEli · 2018-03-04T09:40:12Z

TODO/genuine-guide-to-testing-react-redux-applications.md

 > * 校对者：

-# **Genuine guide to** testing **React & Redux applications**
+# 测试 React & Redux 应用真实引导


Genuine guide ：作者想表达的是，这是一份干货满满的指南，翻译成“真实引导”会给读者产生歧义。
建议翻译成，干货指南或者良心指南，etc。

goldEli · 2018-03-04T09:53:58Z

TODO/genuine-guide-to-testing-react-redux-applications.md


 ![](https://cdn-images-1.medium.com/max/800/1*8UPDi2_tJ-4P8rkhfN8uAg.jpeg)

-The times when a front-end was just a thin layer of static pages are long gone. Modern web applications grow ever more complex, and logic continues to shift from the back-end to the front-end. Yet when it comes to testing, many keep the same, outdated mentality. If you work with React and Redux, but for some reason aren’t interested in testing your code, I’m here to show you how and why we do it on a daily basis.
+前端只是一层薄薄的静态页面的时代已经一去不复返了。现代 web 应用程序变得越来越复杂，逻辑也持续从后端向前端转移。然而，当涉及到测试时，许多人都保持着同样的、过时的心态。如果你使用的是 React 和 Redux，但是由于某些原因对测试你的代码不感兴趣，我将在这里向你展示如何以及为什么我们每天都这样做。


许多人都保持着同样的、过时的心态 =》许多人都保持着过时心态

goldEli · 2018-03-04T09:57:45Z

TODO/genuine-guide-to-testing-react-redux-applications.md


-_Note: I’m going to be using_ [_Jest_](https://facebook.github.io/jest/) _and_ [_Enzyme_](https://github.com/airbnb/enzyme)_. It’s the most popular stack for testing React and Redux applications. I assume you’ve had a try or are familiar with them to some extent._
+**注意：我将使用 [Jest](https://facebook.github.io/jest/) 和 [Enzyme](https://github.com/airbnb/enzyme)。它是测试 React & Redux 应用最流行的工具。我认为你已经用过或者能熟练使用它们。**


我认为你已经用过或者能熟练使用它们
=》
我猜你已经用过或者能熟练使用它们了

goldEli · 2018-03-04T10:08:21Z

TODO/genuine-guide-to-testing-react-redux-applications.md


-The app is available [here](https://kubaue.github.io/React-TDD/). When you first enter, no image is displayed. You can fetch one by clicking the button. I’m using free [Dog API](https://dog.ceo/dog-api/). Now, without further ado, let’s write some tests. The code is available [here](https://github.com/kubaue/React-TDD).
+产品效果可以查看 [这里](https://kubaue.github.io/React-TDD/)。当你第一次进入页面的时候，不会显示图片。你可以通过点击按钮来获取一个。我使用了免费的 [Dog API](https://dog.ceo/dog-api/)。现在让我们写一些测试。可以查看我的 [源码](https://github.com/kubaue/React-TDD).


产品效果可以查看这里。
=》
这里有一个可用的应用。

goldEli · 2018-03-04T10:08:50Z

TODO/genuine-guide-to-testing-react-redux-applications.md


-The app is available [here](https://kubaue.github.io/React-TDD/). When you first enter, no image is displayed. You can fetch one by clicking the button. I’m using free [Dog API](https://dog.ceo/dog-api/). Now, without further ado, let’s write some tests. The code is available [here](https://github.com/kubaue/React-TDD).
+产品效果可以查看 [这里](https://kubaue.github.io/React-TDD/)。当你第一次进入页面的时候，不会显示图片。你可以通过点击按钮来获取一个。我使用了免费的 [Dog API](https://dog.ceo/dog-api/)。现在让我们写一些测试。可以查看我的 [源码](https://github.com/kubaue/React-TDD).


你可以通过点击按钮来获取一个
=>
你可以通过点击按钮来获取一张图片

goldEli · 2018-03-04T10:50:38Z

TODO/genuine-guide-to-testing-react-redux-applications.md


-_Note: If you’re looking for classy Enzyme assertions, go check out_ [_enzyme-matchers_](https://github.com/FormidableLabs/enzyme-matchers)_._
+**注意：如果你在寻找优雅的 Enzyme 断言，可以查看 [_enzyme-matchers_](https://github.com/FormidableLabs/enzyme-matchers)**


如果你在寻找优雅的 Enzyme 断言
=》
如果你在寻找优雅的 Enzyme 断言库

goldEli · 2018-03-04T10:56:58Z

TODO/genuine-guide-to-testing-react-redux-applications.md


-First, we want to ensure that the placeholder is displayed when no image URL is provided. Also, no image should be displayed.
+首先，我们要确保没有图片 URL 时，要显示占位符，而且不应该显示图片。


我们要确保没有图片 URL 时，要显示占位符，而且不应该显示图片。
=》
我们要确保没有图片 URL，没有图片显示时显示占位符。

goldEli · 2018-03-04T11:26:19Z

TODO/genuine-guide-to-testing-react-redux-applications.md

@@ -217,17 +218,17 @@ Nothing fancy, huh? Let’s look at the second test case.
  });
 ```

-See how easy this is? The test is very descriptive and we perform real interactions with our component. It covers every aspect unit tests did, and even more. Now we can actually tell if building blocks not only work well separately, but are coupled together in the right way.
+看到这是多么容易了吗？这个测试有很强的描述性，我们与组件进行了真实的交互。它涵盖了单元测试所做的每个方面，甚至更多。现在我们可以说构建块不仅能够单独运行，而且能够以正确的方式结合起来。


看到这是多么容易了吗？这个测试有很强的描述性，我们与组件进行了真实的交互。
=》
很容易对吧？这个测试描述了我们和组件之间的真实交互。

goldEli · 2018-03-04T11:28:43Z

TODO/genuine-guide-to-testing-react-redux-applications.md


-Oh, if you’re familiar with Enzyme and wondered why I had to call wrapper.update(), [here’s why](https://github.com/airbnb/enzyme/issues/1153). TLDR: It’s a bug in Enzyme 3. Perhaps by the time you’re reading this, it will be fixed.
+哦，如果你对 Enzyme 很熟悉，还想知道我为什么调用 wrapper.update()，[这就是原因](https://github.com/airbnb/enzyme/issues/1153)。太长不看：这是 Enzyme 3 的一个 bug。也许在你阅读这篇文章时，它会被修复。


太长不看：这是 Enzyme 3 的一个 bug。
=》
简而言之：这是 Enzyme 3 的一个 bug。

goldEli · 2018-03-04T11:38:02Z

TODO/genuine-guide-to-testing-react-redux-applications.md


-Simply start with integration tests. It’s very likely that you won’t feel the urge to implement a single unit test in your project. That means your complexity isn’t divided between building blocks, and it’s perfectly fine. You’ll save quite some time. On the other hand, there are systems that will leverage the power of unit tests. There is room for both.
+只需要从集成测试开始。你很可能觉得不会在你的项目中实施一个单元测试。这意味着你的复杂性不会在构建块之间划分，而且非常好。你会节省很多时间。另一方面，有些系统会利用单元测试的能力。两者都有空间。


而且非常好
=》
这样非常好

…ations.md' of https://github.com/jonjia/gold-miner into translation/genuine-guide-to-testing-react-redux-applications.md

jonjia · 2018-03-05T02:27:15Z

@leviding 修改完成。
@zephyrJS @goldEli 感谢细心校对，给出了很棒的建议。

leviding · 2018-03-05T04:27:43Z

@jonjia 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。

掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。
专栏地址：https://zhuanlan.zhihu.com/juejinfanyi

jonjia · 2018-03-05T04:38:47Z

掘金已经发布了：https://juejin.im/post/5a9cc812518825556f54e3b6

jonjia added 5 commits December 26, 2017 18:29

finish translate

7723e1e

remove .idea

f59d335

remove .idea

b406dfd

syncing the fork

3f3af93

finish translate

b52594a

fanyijihua added the 校对认领 label Mar 4, 2018

fanyijihua mentioned this pull request Mar 4, 2018

测试 React & Redux 应用真实引导 #3342

Closed

fanyijihua added the 正在校对 label Mar 4, 2018

zephyrJS approved these changes Mar 4, 2018

View reviewed changes

fanyijihua removed the 校对认领 label Mar 4, 2018

leviding added the 前端 label Mar 4, 2018

goldEli reviewed Mar 4, 2018

View reviewed changes

jonjia and others added 3 commits March 5, 2018 10:22

Modify according to the proofreader's opinion

af6c788

Modify according to the proofreader's opinion

ddb37b7

Merge branch 'translation/genuine-guide-to-testing-react-redux-applic…

2985bbe

…ations.md' of https://github.com/jonjia/gold-miner into translation/genuine-guide-to-testing-react-redux-applications.md

jonjia changed the title ~~测试 React & Redux 应用真实引导~~ 测试 React & Redux 应用良心指南 Mar 5, 2018

leviding approved these changes Mar 5, 2018

View reviewed changes

leviding merged commit 8ef564d into xitu:master Mar 5, 2018

leviding added 翻译完成 and removed 正在校对 labels Mar 5, 2018

jonjia deleted the translation/genuine-guide-to-testing-react-redux-applications.md branch March 6, 2018 02:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

测试 React & Redux 应用良心指南 #3370

测试 React & Redux 应用良心指南 #3370

jonjia commented Mar 4, 2018

zephyrJS commented Mar 4, 2018

fanyijihua commented Mar 4, 2018

zephyrJS left a comment

zephyrJS Mar 4, 2018

zephyrJS Mar 4, 2018

zephyrJS Mar 4, 2018

goldEli commented Mar 4, 2018

fanyijihua commented Mar 4, 2018

goldEli left a comment

goldEli Mar 4, 2018

jonjia Mar 5, 2018

goldEli Mar 4, 2018

goldEli Mar 4, 2018

goldEli Mar 4, 2018 •

edited

goldEli Mar 4, 2018

goldEli Mar 4, 2018

goldEli Mar 4, 2018

goldEli Mar 4, 2018

goldEli Mar 4, 2018

goldEli Mar 4, 2018

jonjia commented Mar 5, 2018

leviding commented Mar 5, 2018

jonjia commented Mar 5, 2018


		Before we start, let’s talk about what aspects of components are worth testing. We obviously can’t test if the component looks pleasant. However, we should definitely test if certain conditional elements are in fact displayed or not; or whether performing some action on a component (not to be confused with Redux actions) results in the function passed in the component’s props being called.
		在我们开始之前，让我们先谈谈组件为什么需要测试。我们显然无法测试组件是否好看。但是，我们绝对应该测试某些条件性的元素是否能成功显示；或者对组件执行某些操作（不是 redux 中的 action），通过组件 props 传递的方法是否会被调用。


		Instead of testing building blocks separately and in detail, we’ll now bundle them together and put them in a black box. We don’t care anymore how the stuff inside works. What happens in the component, stays in the component. That’s why integration tests are so resilient and refactor-proof. You can switch the entire underlying mechanism without the need to update the test.
		我们现在将它们捆绑在一起并放在一个黑盒子中，而不是单独和详细地测试构建块。我们不再关心内部是如何工作的。组件中会发生什么，停留在组件中。这就是为什么集成测试非常有弹性和方便重构的原因。你可以切换整个底层机制而无需更新测试。


		Simply start with integration tests. It’s very likely that you won’t feel the urge to implement a single unit test in your project. That means your complexity isn’t divided between building blocks, and it’s perfectly fine. You’ll save quite some time. On the other hand, there are systems that will leverage the power of unit tests. There is room for both.
		只需要从集成测试开始。你很可能觉得不会在你的项目中实施一个单元测试。这意味着你的复杂性不会在构建块之间划分，而且非常好。你会节省很多时间。另一方面，有些系统会利用单元测试的能力。两者都有空间。


		_Note: I’m going to be using_ [_Jest_](https://facebook.github.io/jest/) _and_ [_Enzyme_](https://github.com/airbnb/enzyme)_. It’s the most popular stack for testing React and Redux applications. I assume you’ve had a try or are familiar with them to some extent._
		注意：我将使用 [Jest](https://facebook.github.io/jest/) 和 [Enzyme](https://github.com/airbnb/enzyme)。它是测试 React & Redux 应用最流行的工具。我认为你已经用过或者能熟练使用它们。


		The app is available [here](https://kubaue.github.io/React-TDD/). When you first enter, no image is displayed. You can fetch one by clicking the button. I’m using free [Dog API](https://dog.ceo/dog-api/). Now, without further ado, let’s write some tests. The code is available [here](https://github.com/kubaue/React-TDD).
		产品效果可以查看 [这里](https://kubaue.github.io/React-TDD/)。当你第一次进入页面的时候，不会显示图片。你可以通过点击按钮来获取一个。我使用了免费的 [Dog API](https://dog.ceo/dog-api/)。现在让我们写一些测试。可以查看我的 [源码](https://github.com/kubaue/React-TDD).


		_Note: If you’re looking for classy Enzyme assertions, go check out_ [_enzyme-matchers_](https://github.com/FormidableLabs/enzyme-matchers)_._
		注意：如果你在寻找优雅的 Enzyme 断言，可以查看 [_enzyme-matchers_](https://github.com/FormidableLabs/enzyme-matchers)


		First, we want to ensure that the placeholder is displayed when no image URL is provided. Also, no image should be displayed.
		首先，我们要确保没有图片 URL 时，要显示占位符，而且不应该显示图片。


		Oh, if you’re familiar with Enzyme and wondered why I had to call wrapper.update(), [here’s why](https://github.com/airbnb/enzyme/issues/1153). TLDR: It’s a bug in Enzyme 3. Perhaps by the time you’re reading this, it will be fixed.
		哦，如果你对 Enzyme 很熟悉，还想知道我为什么调用 wrapper.update()，[这就是原因](https://github.com/airbnb/enzyme/issues/1153)。太长不看：这是 Enzyme 3 的一个 bug。也许在你阅读这篇文章时，它会被修复。

测试 React & Redux 应用良心指南 #3370

测试 React & Redux 应用良心指南 #3370

Conversation

jonjia commented Mar 4, 2018

zephyrJS commented Mar 4, 2018

fanyijihua commented Mar 4, 2018

zephyrJS left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

goldEli commented Mar 4, 2018

fanyijihua commented Mar 4, 2018

goldEli left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

goldEli Mar 4, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jonjia commented Mar 5, 2018

leviding commented Mar 5, 2018

jonjia commented Mar 5, 2018

goldEli Mar 4, 2018 •

edited