222
10
测试
为了和我们的竞争对手齐头并进,我们必须在确保产品质量的情况下勇往直前。一个
能够确保用户可以达成这个目标的重要工具是单元测试。单元测试使得用户可以验证
应用程序引入的每个部件或者单元能够按照预期的结果运行。
采用函数式编程技术的好处之一就是它们编写的代码都是可测试的。纯函数天生就是
可测试的。不可变性也非常容易测试。为解决特定任务而设计的小型函数组合而成的
应用程序也产生了可测试的函数或者代码单元。
1
在本节中,我们将会演示可以用于
React Redux
应用程序进行单元测试的技术。本章不
仅会涉及测试,还会介绍辅助用户评估、改进用户代码和测试的工具。
ESLint
在大部分编程语言中,用户可以运行程序之前,代码必须经过编译。很多编程语言对
代码风格有着非常严格的规定,只有代码经过相应的格式化并且格式完全正确之后才
能进行编译。
JavaScript
并没有这些规则,并且也不需要使用编译器。我们手工编写
代码,为了确认它们是否可以正常运行,在浏览器中直接运行它们即可。好消息是,
有大量的工具可以帮助用户分析代码,并要求用户遵循特定的格式规范。
分析
JavaScript
代码的过程被称为代码检查(
hinting
或者
linting
)。
JSHint
JSLint
用于分析
JavaScript
代码的原生工具,并且可以为用户提供代码格式化的反馈意见。
1
希望了解单元测试的基本概念,可以参考
Martin Fowler
的文章“
Unit Testing
”(
http://
martinfowler.com/bliki/UnitTest.html
测试
223
ESLint(
http://eslint.org/
)
是一款最新的代码检查工具,并且支持最新的
JavaScript
语法
特性。此外,
ESLint
支持插件机制。这意味用户可以创建和共享能够被添加到
ESLint
配置中的插件,继而扩展它的功能。
我们将会用到一个名为
eslint-plugin-react(
http://bit.ly/2kuEylV
)
的插件。该插件会
在分析
JavaScript
代码的同时,对我们的
JSX
React
语法进行分析。
接下来将全局安装
eslint
。用户可以使用
npm
安装
eslint
sudo npm install -g eslint
在使用
ESLint
之前,我们将会需要定义一些用户愿意遵循的配置规则。定义这些规则
的配置文件将会位于我们的项目根目录下。该文件还可以格式化成
JSON
或者
YAML
格式。
YAML(
http://yaml.org/
)
是一种和
JSON
类似的数据序列化格式,不过语法更
少,用户更容易阅读理解。
ESLint
自带的一个工具可以帮助用户建立配置文件。有不少公司创建的
ESLint
配置文
件可以作为用户的入门配置,或者我们也可以创建自己的配置文件。
我们可以通过运行
eslint --init
命令创建一个
ESLint
配置文件,然后回答下列和代
码风格有关的问题:
$ eslint --init
? How would you like to configure ESLint?
回答和代码风格有关的问题
? Are you using ECMAScript 6 features?
Yes
? Are you using ES6 modules?
Yes
? Where will your code run?
Browser
? Do you use CommonJS?
Yes
? Do you use JSX?
Yes
? Do you use React?
Yes
? What style of indentation do you use?
Spaces
? What quotes do you use for strings?
Single
? What line endings do you use?
Unix
? Do you require semicolons?
No
? What format do you want your config file to be in?
YAML
Local ESLint installation not found.
Installing eslint, eslint-plugin-react
执行
eslint --init
命令之后,会发生以下三件事:
1. ESLint
eslint-plugin-react
会被安装到本地的
./node_modules
文件下。
224
10
2.
这些引用依赖会自动添加到
package.json
文件中。
3.
一个以
.eslintrc.yml
为文件后缀名的配置文件被创建并添加到项目的根目录下。
接下来将会创建一个
sample.js
文件对我们的
ESLint
配置进行测试:
const gnar ="gnarly";
const info = ({file= filename, dir= dirname}) =>
<p>{dir}: {file}</p>
switch(gnar) {
default :
console.log('gnarley')
break
}
这个文件存在一些问题,不过对浏览器来说无伤大雅。从技术上来说,这段代码能够
正常运行。让我们在这个文件上运行
ESLint
,看看基于我们的自定义规则会得到什么
样的反馈结果:
$ ./node_modules/.bin/eslint sample.js
/Users/alexbanks/Desktop/eslint-learn/sample.js
1:20 error Strings must use singlequote quotes
1:28 error Extra semicolon semi
3:7 error 'info' is defined but never used no-unused-vars
3:28 error '__filename' is not defined no-undef
3:44 error '__dirname' is not defined no-undef
7:5 error Expected indentation of 0 space ch... indent
8:9 error Expected indentation of 4 space ch... indent
8:9 error Unexpected console statement no-console
9:9 error Expected indentation of 4 space ch... indent
9 problems (9 errors, 0 warnings)
ESLint
分析了我们的
sample.js
文件,并根据前面的配置选项报告了一些问题。这
里我们可以看到
ESLint
指出文件中第一行代码中使用了双引号和分号,因为我们
.eslintrc.yml
配置文件中仅指定了单引号,并且不使用分号。然后,
ESLint
指出虽然
定义了
info
函数,但是它从没有被使用过,
ESLint
不喜欢存在这样的代码。
ESLint
对文件和目录名颇有微词,因为它并没有自动引用全局的
Node.js
。最后,
ESLint
不喜
switch
语句中的缩进,以及
console
语句的使用。
我们可以修改
ESLint
.eslintrc.yml
配置,让它不至于那么严格:
env:
browser: true
commonjs: true
es6: true
测试
225
extends: 'eslint:recommended'
parserOptions:
ecmaFeatures:
experimentalObjectRestSpread: true
jsx: true
sourceType: module
plugins:
- react
rules:
indent:
- error
- 4
- SwitchCase: 1
quotes:
- error
- single
semi:
- error
- never
linebreak-style:
- error
- unix
no-console: 0
globals:
__filename: true
__dirname: true
打开
.eslintrc.yml
文件后,用户将会发现该文件非常容易阅读,这也是
YAML
文件的目
标。这里我们修改了代码缩进规则,以便在
switch
语句中能够使用缩进。然后我们添
加了一
no-console
规则,这会阻止
ESLint
对用户使用
console.log
语句时发出的警
告信息。最后,我们添加了一对全局变量,要求
ESlint
忽略它们。
我们仍然需要对上述文件做出适当修改,以便遵循我们的代码风格规范
:
const gnar =
'gnarly'
export const info
= ({file= filename, dir= dirname}) =>
<p>{dir}: {file}</p>
switch(gnar) {
default :
console.log('gnarly')
break
}
我们将第一行的分号和双引号删除了。此外,导出
info
函数的信息意味着
ESLint
将不
会向用户发送该函数未使用的警告信息了。在修改
ESLint
配置和编辑我的代码的过程
中,我们就拥有了一个通过代码格式化测试的文件。

Get React学习手册 now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.