$ npm install --save-dev jest
$ node_modules/.bin/jest

it('button click should increment the count', () => {
  expect(wrapper.vm.count).toBe(0)
  const button = wrapper.find('button')
  button.trigger('click')
  expect(wrapper.vm.count).toBe(1)
})

wrapper.setData({ count: 10 })
wrapper.setProps({ foo: 'bar' })

import { render } from '@vue/server-test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('renders a div', () => {
    const $route = { path: 'http://www.example-path.com' }
    const wrapper = render(Foo, {
      mocks: {
        $route
      }
    })
    expect(wrapper.text()).toContain($route.path)
  })
})

import { render } from '@vue/server-test-utils'
import Foo from './Foo.vue'

describe('Foo', () => {
  it('renders a div', () => {
    const $route = { path: 'http://www.example-path.com' }
    const wrapper = render(Foo, {
      mocks: {
        $route
      }
    })
    expect(wrapper.text()).toContain($route.path)
  })
})

// ui-spec.js
it('loads the app', () => {
  cy.visit('http://localhost:3030')
  cy.get('.todoapp').should('be.visible')
})

it('adds 2 todos', () => {
  cy.visit('http://localhost:3000')
  cy.get('.new-todo')
    .type('learn testing{enter}')
    .type('be cool{enter}')
  cy.get('.todo-list li')
    .should('have.length', 2)
})

it('loads todos on start', () => {
  cy.server()
  cy.route('/todos').as('todos')
  cy.visit('/')
  cy.wait('@todos')
})

it('loads todos from fixture file', () => {
  cy.server()
  // loads response from "cypress/fixtures/todos.json"
  cy.route('/todos', 'fixture:todos')
  cy.visit('/')
  getTodoItems()
    .should('have.length', 2)
    .contains('li', 'mock second')
    .find('.toggle')
    .should('be.checked')
})

const getStore = () => 
  cy.window().its('app.$store')
it('changes the ui', () => {
  getStore().then(store => {
    store.dispatch('setNewTodo', 'a new todo')
    store.dispatch('addTodo')
    store.dispatch('clearNewTodo')
  })

  // assert UI
  getTodoItems().should('have.length', 1)
    .first().contains('a new todo')
})

cypress run --record
cypress run --record --group single
cypress run --record --group parallel --parallel

function add(a, b) {
  return a + b
}

it('adds', () => {
  expect(add(2,3)).to.equal(5)
})

function add(a, b) {
  const el = document.getElementById('result')
  el.innerText = a + b
}

it('adds', () => {
  add(2,3)
  const el = document.getElementById('result')
  expect(el.innerText).to.equal(5)
})

function add() {
  const {a, b} = 
    JSON.parse(localStorage.getItem('inputs'))
  const el = document.getElementById('result')
  el.innerText = a + b
}

it('adds', () => {
  localStorage.setItem('inputs') =
    JSON.stringify({a: 2, b: 3})
  add()
  const el = document.getElementById('result')
  expect(el.innerText).to.equal(5)
})

it('logs user in', () => {
  cy.visit('page.com')
  cy.get('#login').click()
})

it('logs user in', () => {
  mount(LoginComponent)
  cy.get('#login').click()
})