Search⌘ K
AI Features
Home
Courses
Testing Vue.js Components with Jest

Testing MessageList with Message Component

Explore testing the Vue.js MessageList component deeply with Jest by using mount instead of shallowMount. Understand the importance of lifecycle hooks, test isolation with beforeEach, and managing snapshots. Learn to avoid side effects from child components during deep rendering to ensure reliable tests.

We'll cover the following...

Testing Components Using Deep Rendering

Step 1:

To test MessageList with Deep Rendering, we just need to use mount instead of shallowMount from the previously created test/MessageList.test.js:

require('./check-versions')()

process.env.NODE_ENV = 'production'

var ora = require('ora')
var rm = require('rimraf')
var path = require('path')
var chalk = require('chalk')
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')

var spinner = ora('building for production...')
spinner.start()

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  webpack(webpackConfig, function (err, stats) {
    spinner.stop()
    if (err) throw err
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false
    }) + '\n\n')

    console.log(chalk.cyan('  Build complete.\n'))
    console.log(chalk.yellow(
      '  Tip: built files are meant to be served over an HTTP server.\n' +
      '  Opening index.html over file:// won\'t work.\n'
    ))
  })
})

Have you noticed the ...