七爪源码：测试 React 应用程序创建 Cypress 测试

发布时间：2022-10-18 11:04:14 所属栏目：应用来源：

导读：　　介绍

　　我正在进行的系列的第七部分是关于如何测试现代 React 应用程序。这次我将介绍如何创建我们的第一个 Cypress 测试。

　　Cypress 是一个强大的端到端测试框架。

　　在本系列的前几部分中

　　介绍

　　我正在进行的系列的第七部分是关于如何测试现代 React 应用程序。这次我将介绍如何创建我们的第一个 Cypress 测试。

　　Cypress 是一个强大的端到端测试框架。

　　在本系列的前几部分中，我介绍了如何使用 Vitest 设置我们的单元测试框架。如有必要，单元测试将涵盖更多孤立和单独的部分制作应用程序，例如我们的功能或仅组件测试。

　　我们还讨论了如何最初设置赛普拉斯及其依赖项。赛普拉斯将处理我们的大部分测试，并让我们对我们的测试充满信心。

　　让我们简要回顾一下到目前为止我们已经制作的小型准系统应用程序。

　　单击按钮时，它会从服务中获取帖子并将其显示在页面上：

　　作为参考，您可以在此处找到存储库。

　　赛普拉斯示例

　　让我们继续运行使赛普拉斯启动并运行所需的命令：

　　npm run dev

　　npm run test-e2e

　　首次启动应用程序时，您会看到它何时通过终端完成：

　　将打开一个窗口，其中包含一些测试，我们可以通过大量示例进行查看。

　　我强烈建议您查看这些测试，以获取有关如何在赛普拉斯中使用大量语法的真实示例。它们涵盖了相当多的用例。这些测试可以在我们文件夹结构的以下位置找到：

　　创建我们的第一个测试

　　让我们继续并开始创建我们的第一个测试。在集成文件夹中，让我们创建一个文件 first-test.spec.js。

　　Cypress 语法与我们的 vitest 语法非常相似。我们将从添加一个封装描述函数开始。

　　describe('First Test', () => {});
　　在函数的第二个参数中，我们将添加我们的单独测试。同样，与 vitest 类似，我们将使用我们的第一个测试逻辑添加一个 it 函数。

　　describe('First Test', () => {
　　     it('Fetch posts', () => {});
　　});
　　让我们暂停一下，再看看 Cypress 窗口。在列表的底部，我们会找到新添加的测试。

　　如果我们单击测试，我们将收到一条消息，指出未找到测试。让我们继续并开始使用赛普拉斯语法导航到页面。

　　describe('First Test', () => {
　　 it('Fetch posts', () => {
　　    cy.visit('http://localhost:3000/')
　　 });
　　});
　　只是为了分解正在发生的事情，cy 是一个全局可用的对象，具有我们的 Cypress 语法。 cy.visit() 允许我们访问指定的 URL。在 Cypress 窗口中，我们将从我们的开发环境中获取我们的页面。

　　在 URL 旁边的中间，我们会看到一个十字线图标。如果单击此图标，您将能够选择页面上的其他元素。这个是来做什么的？

　　您可以在我们的赛普拉斯测试中选择要查询的元素。惊人的。这是赛普拉斯使用起来如此有趣的原因之一。它确实使创建测试变得轻而易举。我们可以只使用现有的选择器来获取按钮，但让我们在 JSX 中添加一个不同的选择器。

　　    Fetch Posts
　　属性 data-testid 将允许我们查询具有更高特异性的按钮。如果我们继续使用 Cypress 窗口中的十字准线图标，我们可以看到新的选择器。

　　单击右侧的复制按钮，我们可以抓取选择器并在我们的测试中使用它。

　　describe('First Test', () => {
　　    it('Fetch posts', () => {
　　        cy.visit('http://localhost:3000/');
　　        cy.get('[data-testid="fetch-posts"]').click();
　　    });
　　});
　　在我们的测试窗口中，我们将看到正确获取的帖子。作为我们第一个测试的最后一部分，让我们继续并断言帖子被正确获取。但是我们对帖子的获取是异步的。不用担心，因为赛普拉斯已经为我们提供了保障。

　　describe('First Test', () => {
　　    it('Fetch posts', () => {
　　        cy.visit('http://localhost:3000/');
　　        cy.get('[data-testid="fetch-posts"]').click();
　　        cy.intercept('https://jsonplaceholder.typicode.com/posts').as(
　　            'getPosts'
　　        );
　　        cy.wait('@getPosts');
　　    });
　　});
　　我们的 cy 对象有一个拦截属性，允许我们检查特定端点的网络请求。我们通过将 as 函数与别名名称链接来为该请求设置别名。最后，我们将使用 cy.wait('@getPosts') 命令等待请求。

　　剩下要做的就是检查帖子是否正确加载。让我们将另一个 data-testid 添加到我们的帖子列表中。

　　    {posts.map((post) => (
　　
　　{post.title}
　　
　　{post.body}
　　
　　    ))}
　　有了这个，我们可以查询帖子的数量。

　　describe('First Test', () => {
　　    it('Fetch posts', () => {
　　        cy.visit('http://localhost:3000/');
　　        cy.intercept('https://jsonplaceholder.typicode.com/posts').as(
　　            'getPosts'
　　        );
　　        cy.get('[data-testid="fetch-posts"]').click();
　　        cy.wait('@getPosts');
　　        cy.get('[data-testid="posts"]')
　　            .children()
　　            .should('have.length.greaterThan', 10);
　　    });
　　});
　　我们完成了，在 Cypress 窗口中，您可以看到测试通过了。

　　把它包起来

　　我希望你喜欢我们的第一个 Cypress 测试。该框架将为您提供对整个应用程序的大量覆盖。说到覆盖，在下一篇文章中，我将介绍如何将 vitest 和 Cypress 连接到代码覆盖系统。

（编辑：应用网_阳江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

基于云的物联网软件对	物联网正在重造数字营
工业能源收集在制造业	更智能更环保的建筑物

七爪源码：测试 React 应用程序 创建 Cypress 测试

七爪源码：测试 React 应用程序创建 Cypress 测试