We can also use Wallaby.js to see the results of our unit tests in real time within our editor. It's not a free tool, but you may find it useful when creating test-driven Vue applications. Let's start off by cloning/downloading a project that already has Wallaby set up. Run the following in your Terminal:
# Clone the repository $ git clone https://github.com/ChangJoo-Park/vue-wallaby-webpack-template # Change directory $ cd vue-wallaby-webpack-template # Install dependencies $ npm install # At the time of writing this package is missing eslint-plugin-node $ npm install eslint-plugin-node # Run in browser $ npm run dev
We can then open this up inside our editor and install the Wallaby.js
extension inside our editor. You can find a list of supported editors and instructions at https://wallabyjs.com/download/.
I'll be installing this within Visual Studio Code, which starts by searching the extensions marketplace for Wallaby:
We can then tell...