Cypress

End to end testing

• E2E testing is a way to make sure that applications behave as expected and that the flow of data is maintained for all kinds of user tasks and processes. This type of testing approach starts from the end user’s perspective and simulates a real-world scenario.

• In Cypress framework, it can help to simulate the user behaviors , such as browsing website , clicking button, and capture the website content to see whether the requirement is meet or not

spec.cy.js

describe('template spec', () => {
  it('passes', () => {
    // simulate user action
    // visit page
    cy.visit('https://example.cypress.io')
    // click button
    cy.contains('type').click()
    // assert the url 
    cy.url().should('include', '/commands/actions')

    // Get an input, type into it
    cy.get('.action-email').type('[e-mail]')

    // Capture a part of dom element and assert it
    cy.get('.action-email').should('have.value', '[e-mail]')
  })
})

Component Testing

• For importing the component , it can be used to test the component behavior, ui , etc...

import React from 'react'
import RainbowBorderBox from '../../src/RainbowBorderBox'
describe('<RainbowBorderBox/>', () => {
  it('mounts', () => {
    // see: https://on.cypress.io/mounting-react
    cy.mount(<RainbowBorderBox/>)
  })
})