Watchers
Explore how to effectively test watchers in Vue.js components using Jest. Understand when to use watchers, how their update cycle impacts testing, and methods to verify watcher reactions to data changes, including handling asynchronous operations with Vue's nextTick and jest spies.
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 ...