ReactJS + Cypress E2E 测试

Question

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

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

有效，但是

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

没有按预期工作（登录后将我重定向到仪表板，并在我尝试断言路径名包含 '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，必须使用基于 url 的完整环境的 .visit 命令。 ..

这是[有效的]完整测试代码

   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"
}

ReactJS + Cypress E2E 测试

ReactJS + Cypress E2E testing

reactjs

e2e-testing

cypress