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

$ jest
 PASS  ./test.js
  add
    ✓ adds numbers (4ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.763s, estimated 1s
Ran all test suites.

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

$ npm install -D cypress

// 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)
})

const fetchTodos = () => cy.request('/todos').its('body')

it('adds todo', () => {
  addTodo('first todo')
  addTodo('second todo')
  fetchTodos().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')
const getStoreTodos = () =>
  getStore().its('todos')
beforeEach(stubMathRandom)
it('can add a particular todo', () => {
  const title = `a single todo ${newId()}`
  enterTodo(title)
  getStoreTodos().should('deep.equal', [{
    title,
    completed: false,
    id: '1'
  }])
})

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

$ npm install -D cypress cypress-vue-unit-test

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()
})