Testing Vue.js Components with Jest/

...

/

Watchers

Watchers

In this lesson, we'll learn how to test part of the logic of watchers.

We'll cover the following...

There are rare cases where we need to use watchers instead of computed properties. Sometimes watchers are misused as well, which messes things up and results in an unclear data workflow among components. So before using watchers, we should think about their use and suitability.

As we can see in the Vue.js docs, watchers are often used to react to data changes and perform asynchronous operations, such as performing an ajax request.

Testing Watchers

Let’s say we want to do something when the inputValue from the state changes. We could do an ajax request, but since that’s more complicated (as we’ll see it in the next lesson) let’s just do a console.log. Add a watch property to the Form.vue component options:

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

Notice that the inputValue watch ...