Part 7: Testing with Jest

Installation

  1. Add dependencies
    npm i --save-dev babel-jest babel-plugin-module-resolver cross-env jest jest-vue-preprocessor vue-test-utils
    
  2. Add jest configuration
    // jest.config.js
    module.exports = {
     verbose: false,
     cache: true,
     moduleFileExtensions: [
       'js',
       'vue'
     ],
     transform: {
       '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
       '.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor'
     },
     collectCoverageFrom: [
       'src/**/*.{js,vue}',
       '!src/main.js',
       '!**/node_modules/**'
     ],
     coverageDirectory: '<rootDir>/tests/unit/coverage',
     mapCoverage: true
    }
    
  3. Update the .babelrc file
    {
     "presets": [
       ["env", {
         "modules": false,
         "targets": {
           "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
         }
       }],
       "stage-2"
     ],
     "plugins": ["transform-runtime"],
     "env": {
       "test": {
         "presets": ["env", "stage-2"],
         "plugins": [
           "dynamic-import-node",
           ["module-resolver", {
             "root": ["./src"],
             "alias": {
               "@": "./src"
             }
           }]
         ]
       }
     }
    }
    
  4. Add a new command in the package.json
    "unit": "cross-env BABEL_ENV=test jest tests/unit/specs/**"
    

Optionnal requirements:

  • ESLint: define Jest in the environment, and lint by default the test folder

    // .eslintrc.js
    env: {
      browser: true,
      jest: true
    }
    
    // package.json
    "lint": "eslint --ext .js,.vue src tests",
    
  • Git: ignore the coverage folder

    .gitignore
    +tests/unit/coverage/
    

Your first unit test

It's time to create our first test! Create a new file and paste the following:

// tests/unit/specs/app.spec.js
import { mount, shallow } from 'vue-test-utils'
import MainComponent from '@/App.vue'
import store from '@/store'

describe('App.vue', () => {
  it('test initial rendering', () => {
    const wrapper = mount(MainComponent, { store })
    const appTemplate = wrapper.html()

    expect(appTemplate).toMatchSnapshot()
  })

  it('test rendering with datas', () => {
    const wrapper = shallow(MainComponent, { store })
    const appTemplate = wrapper.html()

    expect(appTemplate).toMatchSnapshot()
  })
})

You can run this tests with: npm run unit. Jest created a new file: tests/unit/specs/__snapshots__/app.spec.js.snap. Open this file, it contains the component's HTML.

New commands available

# Run tests + generate coverage (available under /tests/unit/coverage)
npm run unit -- --coverage

# Run tests in watch node
npm run unit -- --watchAll

# Run tests + update snapshots if needed
npm run unit -- -u

Now, let's meet the real world

results matching ""

    No results matching ""