From 46583c8fa4290db6f4d573335eb4723cd7be2c8f Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Mon, 16 Dec 2019 21:07:36 +1000 Subject: [PATCH 1/5] (docs): add a guide on testing without a build step in node.js --- docs/README.md | 1 + .../guides/usage-without-a-build-step-node.md | 56 +++++++++++++++++++ 2 files changed, 57 insertions(+) create mode 100644 docs/guides/usage-without-a-build-step-node.md diff --git a/docs/README.md b/docs/README.md index dd791d4f8..2c4a9fdd5 100644 --- a/docs/README.md +++ b/docs/README.md @@ -10,6 +10,7 @@ Vue Test Utils is the official unit testing utility library for Vue.js. - [Testing Single-File Components with Jest](guides/testing-single-file-components-with-jest.md) - [Testing Single-File Components with Mocha + webpack](guides/testing-single-file-components-with-mocha-webpack.md) - [Testing Single-File Components with Karma](guides/testing-single-file-components-with-karma.md) + - [Testing in Node.js Without a Build Step](guides/usage-without-a-build-step-node.md) - [Testing Asynchronous Behavior](guides/testing-async-components.md) - [Using with TypeScript](guides/using-with-typescript.md) - [Using with Vue Router](guides/using-with-vue-router.md) diff --git a/docs/guides/usage-without-a-build-step-node.md b/docs/guides/usage-without-a-build-step-node.md new file mode 100644 index 000000000..ee130dce4 --- /dev/null +++ b/docs/guides/usage-without-a-build-step-node.md @@ -0,0 +1,56 @@ +## Usage Without a Build Step + +While it is common to build Vue applications using tools [Webpack](https://jestjs.io/) to bundle the application, `vue-loader` to leverage Single File Components, and [Jest](https://jestjs.io/) to write expressive tests, it is possible to use `vue-test-utils` with much less. The minimal requirements for `vue-test-utils`, aside from the library itself are: + +- Vue +- vue-template-compiler +- a DOM (be it [jsdom](https://github.com/jsdom/jsdom) in a Node environment, or the DOM in a real browser) + +In this example, we will demonstrate how to write a simple test using nothing but the minimal dependencies described above. The final code can be found [here](https://github.com/lmiller1990/vue-test-utils-node-basic). + +## Installing the Dependencies + +We need to install some dependencies, as explained above: `npm install vue vue-template-complier jsdom jsdom-global @vue/test-utils`. No test runner or bundler is needed for this example. + +## Requiring the Libraries + +Now we need to require the libraries. There is a slight caveat, explained in a comment, and in depth below the snippet. + +```js +// jsdom-global must be required before vue-test-utils, +// because vue-test-utils expects a DOM (real DOM, or JSDOM) +// to exist. +require('jsdom-global')(); + +const assert = require('assert') + +const Vue = require('vue') +const VueTestUtils = require('@vue/test-utils') +``` + +As the comment says, `jsdom-global` must be required before `@vue/test-utils`. This is because `vue-test-utils` expects a DOM to be present to render the Vue components. If you are running the tests in a real browser, you will not need `jsdom` at all. `Vue` must also be required before `@vue/test-utils` for obvious reasons - `vue-test-utils` expects to be available, as well. We also require `assert` from the node standard library. Normally we would use the matchers provided by a test runner, often in the format of an `expect(...).toEqual(...)` assertion, but `assert` will serve this purpose for this example. + +## Writing a Test + +Now everything is set up, all we need is a component and a test. To keep things simple, we will just render some text and assert it is present in the rendered component. + +```js +const App = Vue.component('app', { + data() { + return { + msg: 'Hello Vue Test Utils' + } + }, + + template: ` +
{{ msg }}
+ ` +}) + +const wrapper = VueTestUtils.shallowMount(App) + +assert.strictEqual('Hello Vue Test Utils', wrapper.text()) +``` + +It's as simple as it looks. Since we do not have a build step, we cannot use Single File Components. There is nothing to stop us using Vue in the same style you would when including it from a CDN via a `