Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add setup information for Vue #686

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 44 additions & 1 deletion docs/vue-testing-library/setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,47 @@ id: setup
title: Setup
---

`Vue Testing Library` does not require any configuration to be used.
`Vue Testing Library` does not require any configuration to be used. However,
there are some things you can do when configuring your testing framework to
reduce some boilerplate. In these docs we'll demonstrate configuring Jest, but
you should be able to do similar things with
[any testing framework](#using-without-jest) (Vue Testing Library does not
require that you use Jest).
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we missing some other important setup for Jest such as .vue support or is that included by default?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm, Single File Components requires an extra bundling step, so it might be less straightforward. For instance, we need to add "vue" to moduleFileExtensions, and also install vue-jest to process *.vue files.

Docs from the official library: https://vue-test-utils.vuejs.org/installation

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just had to set this up today and I can confirm that for single file components it does require following the steps described on the link shared by @afontcu above.


## Using without Jest

If you're running your tests in the browser bundled with webpack (or similar)
then `Vue Testing Library` should work out of the box for you. However, most
people using Vue Testing Library are using it with the Jest testing framework
with the `testEnvironment` set to `jest-environment-jsdom` (which is the default
configuration with Jest).

`jsdom` is a pure JavaScript implementation of the DOM and browser APIs that
runs in Node. If you're not using Jest and you would like to run your tests in
Node, then you must install jsdom yourself. There's also a package called
`jsdom-global` which can be used to setup the global environment to simulate the
browser APIs.

First, install `jsdom` and `jsdom-global`.

```
npm install --save-dev jsdom jsdom-global
```

With mocha, the test command would look something like this:

```
mocha --require jsdom-global/register
```

### Skipping Auto Cleanup

[`Cleanup`](api.mdx#cleanup) is called after each test automatically by default
if the testing framework you're using supports the `afterEach` global (like
mocha, Jest, and Jasmine). However, you may choose to skip the auto cleanup by
setting the `VTL_SKIP_AUTO_CLEANUP` env variable to 'true'. You can do this with
[`cross-env`](https://github.com/kentcdodds/cross-env) like so:

```
cross-env VTL_SKIP_AUTO_CLEANUP=true jest
```