Vue Testing Example with Jest and Cypress

README.md

README

File explanation

The first file is an exemplary Cypress test which logs in and then checks for the existence of the logout button. The second file is a jest test which tests a javascript "class" object for every functionality.

Requirements

Requirements are cut from my original package.json and pasted in the minified version here.

Running

Start the jest tests with jest if you installed jest globally or ./node_modules/.bin/jest if you installed it locally. In the pipeline you want to run ./node_modules/.bin/jest --detectOpenHandles --forceExit --watchAll=false --reporters='jest-junit', so that you generate your report after running tests. Cypress is used over its UI, I currently do not integrate it into our pipeline. Run it with: ./node_modules/.bin/cypress open

Document.test.js

import { WikiDocument } from '@/classes/Document.js'
import { encodeUnicode } from '@/services/helpers/dataFormatter'

const FIRST_DOCUMENT = {
  document: {
    approval_state: false,
    data: 'This is the first document.',
    id: 'as9hd98ktp7g3',
    namespace: ':FirstNamespace',
    rid: 'as98dfgy',
    timestamp: '1606080364139',
    title: 'The first document'
  }
}
const SECOND_DOCUMENT = new WikiDocument({
  document: {
    approval_state: false,
    data: 'This is the second document in a different namespace.',
    id: 'ashgd98o0p7g3',
    namespace: ':SecondNamespace',
    rid: 'as98dfgy',
    timestamp: '1606080364139',
    title: 'document title'
  }
})
var TEST_OBJECT = new WikiDocument(FIRST_DOCUMENT)

beforeEach(() => {
  TEST_OBJECT = new WikiDocument(FIRST_DOCUMENT)
})
describe('Document Class', () => {
  it('should return a class', () => {
    expect(TEST_OBJECT).toBeInstanceOf(WikiDocument)
  })
  it('should set the document', () => {
    expect(TEST_OBJECT.setData(SECOND_DOCUMENT)).not.toEqual(new WikiDocument(FIRST_DOCUMENT))
    expect(TEST_OBJECT.setData(FIRST_DOCUMENT)).not.toEqual(new WikiDocument(SECOND_DOCUMENT))
  })
  it('should reset the document', () => {
    const TEST_OBJECT_2 = new WikiDocument(FIRST_DOCUMENT)
    TEST_OBJECT_2.setData(SECOND_DOCUMENT)
    TEST_OBJECT_2.resetData()
    expect(TEST_OBJECT_2).toEqual(new WikiDocument())
  })
  it('should approve the document', () => {
    expect(TEST_OBJECT.approved()).toStrictEqual(false)
    TEST_OBJECT.sign()
    expect(TEST_OBJECT.approved()).toStrictEqual(true)
  })
  it('should return the formatted document', () => {
    expect(TEST_OBJECT.format()).toEqual({
      data: encodeUnicode('This is the first document.'),
      id: 'as9hd98ktp7g3',
      namespace: ':FirstNamespace',
      title: 'The first document'
    })
  })
  it('should be signable', () => {
    expect(TEST_OBJECT.signable()).toEqual(true)
  })
})

login_spec.js

describe('The Home Page', () => {
  it('successfully loads', () => {
    cy.visit('/')
  })
  it('allows for a login', function () {
    cy.visit('/login')

    cy.get('input[type=email]').type('[email protected]')

    // {enter} causes the form to submit
    cy.get('input[type=password]').type('testpassword{enter}')

    // we should be redirected to /dashboard
    cy.url().should('include', '/wiki')

    // UI should reflect this user being logged in
    cy.get('button[id=logout-button]').should('exist')
  })
})

package.json

{
    "jest": {
    "moduleNameMapper": {
      // Maps style files to the css module
      "\\.(css|less|scss|sass)$": "<rootDir>/node_modules/jest-css-modules",
      // Maps all imports like @/service/encoder.js to ./src/service/encoder.js
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    "moduleFileExtensions": [
      "js",
    ],
    "transform": {
      // transform js files with babel jest
      "^.+\\.js$": "babel-jest"
    }
  },
  //[...]
  "devDependencies": {
    "babel-jest": "^26.6.1", // jest plugin for babel transformation
    "cypress": "^6.1.0", // basic cypress
    "cypress-watch-and-reload": "^1.2.18", // allows test-driven development by restarting certain tests on file change
    "eslint-plugin-cypress": "^2.11.2", // eslint plugins for correcting and autocompleting cypress ...
    "eslint-plugin-jest": "^24.1.0", // ... and jest files
    "jest": "^26.6.1", // basic jest
    "jest-css-modules": "^2.1.0", // prevents errors produced by importing modern css
    "jest-junit": "^12.0.0", // reports test results as report.xml, required for displaying test results in gitlab pipeline
    "jest-mock-axios": "^4.2.1", // mocks axios and allows for fake requests
    // [..]
  }
}