before()와 beforeEach()

before와 beforeEach

Cypress basics: before(), beforeEach(), after() and afterEach()filiphric.com

아주 깔끔한 설명

before()

테스트 실행전의 작업을 수행한다. 하지만, 단 한번만 실행이 된다는 점을 잊지말자.

describe('My first test', () => {

  it('visit!!!', () => {
    cy.visit('https://example.cypress.io');

    cy.contains('type').click();
    cy.url().should('include', 'commands/actions');
    cy.get('.action-email')
      .type('[e-mail]')
      .should('have.value', '[e-mail]');
  })

  it('doesnt isolated!!!', () => {
    cy.visit('https://example.cypress.io');
    cy.contains('type').click();
  })
});

위 테스트에는 두 개의 테스트가 존재한다. 테스트를 잘 살펴보면 두 개의 테스트 모두에서 특정 사이트에 접근을 한 다음에 테스트를 진행한다는걸 알 수 있다. 즉 공통의 작업을 하는것.

이런 상황에서 사용할 수 있는게 바로 before() 메서드다. 이 메스드를 사용하면 특정 작업을 시작하기 전에 등록한 작업을 마치고 테스트에 들어갈 수 있게 된다.

describe('My first test', () => {
  before(() => {
    cy.visit('https://example.cypress.io');
  })

  it('visit!!!', () => {
    cy.contains('type').click();
    cy.url().should('include', 'commands/actions');
    cy.get('.action-email')
      .type('[e-mail]')
      .should('have.value', '[e-mail]');
  })

  it('doesnt isolated!!!', () => {
    cy.contains('type').click();
  })
});

이렇게 수정할 수 있게 된다.

하지만 위의 테스트를 실행하면 에러가 발생한다. 대체 왜? *왜냐하면 before() Hook 은 단 한번만 실행되기 때문이다.

위 테스트의 문제점

테스트의 고립

2개의 테스트를 진행한다. 하지만 에러가 발생한다. 이 에러가 발생하는 이유는 두 번째 테스트가 첫 번째 테스트에 고립된 테스트가 아니기 때문이다.

고립이 아니라는게 무슨말인가? 간단하다. 첫 번째 테스트에서 다른 페이지로 이동했다. 그리고 테스트를 진행했는데, 사이프레스는 테스트에 대한 모든 state을 clear 하고 다음 테스트를 진행하지만, 이 이동된 페이지는 그대로 남기 때문이다.

따라서 두 번째 테스트가 우리가 원하는 페이지에서 실행되지 못하고 첫 번째 테스트로 인해 움직인 페이지에서 수행되고 있던 것.

즉 두 개의 테스트는 고립되지 못했다.

beforeEach

beforeEach 를 사용하면 모든 테스트는 자신이 실행되기 전에 이 작업을 수행한다.

before은 단 한번만 실행된다. 이 덕분에 위에서는 고립이 되지 못한 상황이 발생하고 에러가 일어났다. 이런 문제를 해결할 수 있는게 바로 beforeEach다.

사용법은 아주 간단하다.

describe('My first test', () => {
  beforeEach(() => {
    cy.visit('https://example.cypress.io');
  })

  it('visit!!!', () => {
    cy.contains('type').click();
    cy.url().should('include', 'commands/actions');
    cy.get('.action-email')
      .type('[e-mail]')
      .should('have.value', '[e-mail]');
  })

  it('doesnt isolated!!!', () => {
    cy.contains('type').click();
  })
});

이게 끝이고, 이렇게 하면 위의 문제는 깔끔히 해결된다.