ReactJS + Cypress E2E 测试

Question

对于任何有 React + Cypress 经验的人的快速问题 - 编写我的第一组 E2E 测试，这是困扰我的问题：

cy.visit('http://movinito.docker.localhost:3000/company/subcontractors');

有效，但是

cy.visit('/company/subcontractors');

没有按预期工作（登录后将我重定向到仪表板，并在我尝试断言包含“分包商”的路径名时停留在那里）。

我在 cypress.json 中的 baseUrl 是

{"baseUrl": "http://react_frontend.movinito.docker.localhost:3000"}

而且它通常有效（如果您怀疑是这样）。

我想使用更短、更好的版本 cy.visit('/company/subcontractors'); 而不是 baseUrl 的冗长的重新输入...

在我使用的 .visit 之前添加它可能很重要

cy.request('POST', 'http://movinito.docker.localhost/user/login?_format=json', {name,pass});

[成功]登录...正如我所说，整个事情都有效，但我无法使用 baseUrl，必须使用 .visit 命令和完整的基于环境的 url...

这是 [工作] 完整测试代码

   describe('Subcontractors section', ()=> {
        it('renders properly', ()=> {
            const { name, pass } = {name: 'info@batcave.com', pass: '123#456'}

            cy.request('POST', 'http://movinito.docker.localhost/user/login?_format=json', {
                name,
                pass
            });

            cy.visit('http://movinito.docker.localhost:3000/company/subcontractors');
//    
// I want to replace the above line with cy.visit('/company/subcontractors')
//
            cy.location('pathname').should('include', '/company/subcontractors');
            cy.get('[data-cy=page-title]').should('have.text', 'Subcontractors');
        })
    });

Answer 1

嗯，我阅读了有关 visit() 和 request() 的文档，这应该可以：

describe('Subcontractors section', ()=> {
  it('renders properly', ()=> {
    cy.visit({
      url: 'http://movinito.docker.localhost/user/login?_format=json',
      method: 'POST',
      body {
        name,
        pass
      }
    })

    cy.visit('/company/subcontractors')
    cy.location('pathname').should('include', '/company/subcontractors')
  })
});

// cypress.json
{
  "baseUrl": "http://react_frontend.movinito.docker.localhost:3000"
}