CODEWITHSUNDEEP
reactjse2e-testingcypress
Snsa90
Snsa90

Reputation: 151

ReactJS + Cypress E2E testing

a quick question for anyone with React + Cypress experience - writing my first set of E2E tests and here's whats bugging me :

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

works, but

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

doesn't work as expected (redirects me to the dashboard after login and stays there when I try to assert a pathname includes 'subcontractors').

my baseUrl in the cypress.json is

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

and it generally works (in case that was what you suspected).

I would like to use the shorter, nicer version cy.visit('/company/subcontractors'); instead of the long winded retype of the baseUrl...

Might be important to add that prior to the .visit I use a

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

to [successfully] log in... As I said the whole thing works but I can't make use of the baseUrl and have to use the .visit command with the full environement based url...

Here is the [working] full test code

   describe('Subcontractors section', ()=> {
        it('renders properly', ()=> {
            const { name, pass } = {name: '[email protected]', 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');
        })
    });

Upvotes: 1

Views: 549

Answers (1)

Mr. J.
Mr. J.

Reputation: 3741

hmm, I read the documentation about visit() and request(), this should work to:

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

Upvotes: 1

Related Questions