Cypress 10.x 组件测试指南
一个人到底要走多少弯路，才能成为一名合格的测试开发工程师？
Cypress又又又更新啦！我将讲解如何使用Cypress进行组件测试。（买了书的同学们，公众号回复你的微信号，拉你到Cypress中国群）。
最近两年测试界最火的测试工具莫过于Cypress，作为测试工程师弯道超车必备、下一代UI自动化测试利器，Cypress开发团队也一直在拼命做事，这不，Cypress10.x重磅发布，将“Component Testing”重磅引入到了测试团队。测试人员又可以将自己的势力版图向开发侧移动一下啦 ：）
什么是组件测试
组件测试(也叫模块测试)，关注可单独测试的组件。
组件测试允许单独测试一个组件，这在关注特定组件的功能时很重要，编写组件测试
当你第一次选择组件测试这个类型时，Cypress会自动为你创建相关配置。接上两篇文章介绍，我们在项目根目录下运行：
yarn debu
然后，在选择测试类型的时候，选择Component Testing：
然后，Cypress会让你选择一个框架类型：
我们选个Create React APP，当然你也可以选择列表中的其他选项。
选好后，点击Next，你会看到下面这个图：
根据图中提示，在目录下，执行上图命令行命令。安装成功后，你会看到如下界面：
点击”Continue“，
你会看到一些配置，点击”Continue“，最终你会看到这个界面。
然后选择你要运行的浏览器，点击”Start Component Testing in Chrome“，
选择Create your first spec，
点击Create Spec，然后你会看到下图，
点击”OK“， 然后你会看到如下页面
修复这个错误，安装react-dom
yarn add react-dom
然后，你就能看到测试用例创建成功了。
同时，你检查项目文件夹，你会发现文件已经创建到了cypress/component下了。
运行测试用例
测试用例的运行基本不变，你可以直接：
npx cypress run
但是你也知道我不推荐。我们去更改项目根目录下的package.json文件。给它添加下如下scripts部分。最后，你的package.json看起来像这样：
然后你就可以在命令行里如此运行：
yarn debug
然后，你就可以愉快的编写执行Cyprss用例了。
两个难点
1. 做Component Test的前提是你对前端代码库有访问权限，否则一切都是白谈。
2. 你的Cypress框架要和你的Web端代码放在一个代码库下，这样你mount起来才方便。这个就是另外一个困难。
由于这两个原因，加上开发人员也无意放手组件测试， 所以大部分情况下测试人员都不会执行Component Test这个测试类型。
一个真实用例
假设你在你的组织有一定发言权，搞定了以上两件事，我们来看看Cypress能带给我们什么惊喜。
首先，要做组件测试，我们得有一个Web APP。你需要创建一个Web App。Cypress支持几种框架，我们使用create-react-app来快速创建一个Web App。
npx create-react-app my-ap
然后，你的项目文件夹会变成这个样：
my-app就是我们刚刚创建好的一个react web app。
然后我们把这个app运行起来：
// 先到my-app文件夹下
cd my-app
// 启动
npm start
浏览器访问：http://localhost:3000/， 你将看到我们的app启动了。
此时，更改我们的component Test测试文件:
import * as React from 'react'
import App from '../../../App'
describe('ComponentName.cy.js', () => {
it('renders learn react link', () => {
cy.mount(<App />)
cy.contains(/learn react/i).should('be.visible')
})
}
然后，在项目根目录下执行运行：
yarn debug
你会发现运行失败了。查看Log得知：
”Relative imports outside of src/ are not supported“，
也就是说，我们的测试文件里，导入的相对路径超出了src文件夹，所以我们运行失败。
import App from '../../../App知道了错误就好办了。我们去更改项目结构，变成如下这个样子：
两个要点：
- 更改项目的cypress.config.js文件，将component下的specPattern加上。这样符合这个pattern的便都是Component 测试。
- 把你的Component测试文件移到src下。跟你要测试的组件同目录。避免无法导入。
然后，你在项目根目录下，执行
yarn debug
你会发现一切正常，测试成功。
关键点
你要测试哪个组件，就把哪个组件导入进来，然后mount它。
疑惑点
如果框架使用的是create-react-app，那么你在组件测试导入时，必须保证导入的路径在src下。这样就阻挡了我们正常的测试用例组织结构，我们无法把所有component 测试用例都放在component文件夹下面。略有些不方便。
Cypress有很多奇淫巧技， 我已经总结超过百篇
别走开，下一篇更精彩！