Skip to content

[docs] vue-test-utils -> Vue Test Utils #443

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

Merged
merged 4 commits into from
Mar 4, 2018
Merged
Show file tree
Hide file tree
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
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# vue-test-utils [![Build Status](https://circleci.com/gh/vuejs/vue-test-utils/tree/dev.png?style=shield)](https://circleci.com/gh/vuejs/vue-test-utils)
# Vue Test Utils [![Build Status](https://circleci.com/gh/vuejs/vue-test-utils/tree/dev.png?style=shield)](https://circleci.com/gh/vuejs/vue-test-utils)

## Currently in beta
To use vue-test-utils beta:
To use Vue Test Utils beta:
```
// npm
npm install --save-dev @vue/test-utils
Expand All @@ -12,7 +12,7 @@ yarn add --dev @vue/test-utils

## Intro

`vue-test-utils` is the official test library for [Vue.js](http://vuejs.org). It provides methods for unit testing Vue components.
Vue Test Utils is the official test library for [Vue.js](http://vuejs.org). It provides methods for unit testing Vue components.

## Documentation

Expand Down
4 changes: 2 additions & 2 deletions docs/en/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# vue-test-utils
# Vue Test Utils

`vue-test-utils` is the official unit testing utility library for Vue.js.
Vue Test Utils is the official unit testing utility library for Vue.js.

## Table of Contents

Expand Down
2 changes: 1 addition & 1 deletion docs/en/api/components/README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# Components

vue-test-utils includes utility components you can use to stub components.
Vue Test Utils includes utility components you can use to stub components.

[TransitionStub](./TransitionStub.md) and [TransitionGroupStub](./TransitionGroupStub.md) are used to stub `transition` and `transition-group` components by default. You can edit the stubs by editing the config.
2 changes: 1 addition & 1 deletion docs/en/api/components/TransitionGroupStub.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

A component to stub the `transition-group` component. Instead of performing transitions asynchronously, it returns the child components synchronously.

This is set to stub all `transition-group` components by default in the `vue-test-utils` config. To use the built-in `transition-group` component set `config.stubs['transition-group']` to false:
This is set to stub all `transition-group` components by default in the Vue Test Utils config. To use the built-in `transition-group` component set `config.stubs['transition-group']` to false:

```js
import { config } from '@vue/test-utils'
Expand Down
2 changes: 1 addition & 1 deletion docs/en/api/components/TransitionStub.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

A component to stub the `transition` component. Instead of performing transitions asynchronously, it returns the child component synchronously.

This is set to stub all `transition` components by default in the vue-test-utils config. To use the built-in `transition` component set `config.stubs.transition` to false:
This is set to stub all `transition` components by default in the Vue Test Utils config. To use the built-in `transition` component set `config.stubs.transition` to false:

```js
import { config } from '@vue/test-utils'
Expand Down
4 changes: 2 additions & 2 deletions docs/en/api/config.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Config

vue-test-utils includes a config object to defined options used by vue-test-utils.
Vue Test Utils includes a config object to defined options used by Vue Test Utils.

## `vue-test-utils` Config Options
## Vue Test Utils Config Options

### `stubs`

Expand Down
4 changes: 2 additions & 2 deletions docs/en/api/options.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Mounting Options

Options for `mount` and `shallow`. The options object can contain both `vue-test-utils` mounting options and other options.
Options for `mount` and `shallow`. The options object can contain both Vue Test Utils mounting options and other options.

## `vue-test-utils` Specific Mounting Options
## Vue Test Utils Specific Mounting Options

- [`context`](#context)
- [`slots`](#slots)
Expand Down
4 changes: 2 additions & 2 deletions docs/en/api/selectors.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ expect(wrapper.is(Foo)).toBe(true)

### Name

Using a find option object, `vue-test-utils` allows for selecting elements by a `name` of component on wrapper components.
Using a find option object, Vue Test Utils allows for selecting elements by a `name` of component on wrapper components.

```js
const buttonWrapper = wrapper.find({ name: 'my-button' })
Expand All @@ -52,7 +52,7 @@ buttonWrapper.trigger('click')

### Ref

Using a find option object, `vue-test-utils` allows for selecting elements by `$ref` on wrapper components.
Using a find option object, Vue Test Utils allows for selecting elements by `$ref` on wrapper components.

```js
const buttonWrapper = wrapper.find({ ref: 'myButton' })
Expand Down
4 changes: 2 additions & 2 deletions docs/en/api/wrapper/README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# `Wrapper`

`vue-test-utils` is a wrapper based API.
Vue Test Utils is a wrapper based API.

A `Wrapper` is an object that contains a mounted component or vnode and methods to test the component or vnode.

- **Properties:**

`vm` `Component`: this is the `Vue` instance. You can access all the [instance methods and properties of a vm](https://vuejs.org/v2/api/#Instance-Properties) with `wrapper.vm`. This only exists on Vue component wrappers
`element` `HTMLElement`: the root DOM node of the wrapper
`options` `Object`: Object containing `vue-test-utils` options passed to `mount` or `shallow`
`options` `Object`: Object containing Vue Test Utils options passed to `mount` or `shallow`
`options.attachedToDom` `Boolean`: True if `attachToDom` was passed to `mount` or `shallow`

- **Methods:**
Expand Down
4 changes: 2 additions & 2 deletions docs/en/guides/choosing-a-test-runner.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

A test runner is a program that runs tests.

There are many popular JavaScript test runners, and `vue-test-utils` works with all of them. It's test runner agnostic.
There are many popular JavaScript test runners, and Vue Test Utils works with all of them. It's test runner agnostic.

There are a few things to consider when choosing a test runner though: feature set, performance, and support for single-file component (SFC) pre-compilation. After carefully comparing existing libraries, here are two test runners that we recommend:

Expand All @@ -12,7 +12,7 @@ There are a few things to consider when choosing a test runner though: feature s

## Browser Environment

`vue-test-utils` relies on a browser environment. Technically you can run it in a real browser, but it's not recommended due to the complexity of launching real browsers on different platforms. Instead, we recommend running the tests in Node with a virtual browser environment using [JSDOM](https://github.com/tmpvar/jsdom).
Vue Test Utils relies on a browser environment. Technically you can run it in a real browser, but it's not recommended due to the complexity of launching real browsers on different platforms. Instead, we recommend running the tests in Node with a virtual browser environment using [JSDOM](https://github.com/tmpvar/jsdom).

The Jest test runner sets up JSDOM automatically. For other test runners, you can manually set up JSDOM for the tests using [jsdom-global](https://github.com/rstacruz/jsdom-global) in the entry for your tests:

Expand Down
2 changes: 1 addition & 1 deletion docs/en/guides/common-tips.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ In unit tests, we typically want to focus on the component being tested as an is

In addition, for components that contain many child components, the entire rendered tree can get really big. Repeatedly rendering all child components could slow down our tests.

`vue-test-utils` allows you to mount a component without rendering its child components (by stubbing them) with the `shallow` method:
Vue Test Utils allows you to mount a component without rendering its child components (by stubbing them) with the `shallow` method:

```js
import { shallow } from '@vue/test-utils'
Expand Down
2 changes: 1 addition & 1 deletion docs/en/guides/dom-events.md
Original file line number Diff line number Diff line change
Expand Up @@ -209,4 +209,4 @@ A key name after the dot `keydown.up` is translated to a `keyCode`. This is supp

## Important

`vue-test-utils` triggers event synchronously. Consequently, `Vue.nextTick` is not required.
Vue Test Utils triggers event synchronously. Consequently, `Vue.nextTick` is not required.
10 changes: 5 additions & 5 deletions docs/en/guides/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Setup

To get a quick taste of using `vue-test-utils`, clone our demo repository with basic setup and install the dependencies:
To get a quick taste of using Vue Test Utils, clone our demo repository with basic setup and install the dependencies:

``` bash
git clone https://github.com/vuejs/vue-test-utils-getting-started
Expand Down Expand Up @@ -39,7 +39,7 @@ export default {

### Mounting Components

`vue-test-utils` tests Vue components by mounting them in isolation, mocking the necessary inputs (props, injections and user events) and asserting the outputs (render result, emitted custom events).
Vue Test Utils tests Vue components by mounting them in isolation, mocking the necessary inputs (props, injections and user events) and asserting the outputs (render result, emitted custom events).

Mounted components are returned inside a [Wrapper](./api/wrapper.md), which exposes many convenience methods for manipulating, traversing and querying the underlying Vue component instance.

Expand All @@ -60,7 +60,7 @@ const wrapper = mount(Counter)
const vm = wrapper.vm

// To inspect the wrapper deeper just log it to the console
// and your adventure with the `vue-test-utils` begins
// and your adventure with the Vue Test Utils begins
console.log(wrapper)
```

Expand Down Expand Up @@ -106,7 +106,7 @@ it('button click should increment the count', () => {

Vue batches pending DOM updates and applies them asynchronously to prevent unnecessary re-renders caused by multiple data mutations. This is why in practice we often have to use `Vue.nextTick` to wait until Vue has performed the actual DOM update after we trigger some state change.

To simplify usage, `vue-test-utils` applies all updates synchronously so you don't need to use `Vue.nextTick` to wait for DOM updates in your tests.
To simplify usage, Vue Test Utils applies all updates synchronously so you don't need to use `Vue.nextTick` to wait for DOM updates in your tests.

*Note: `nextTick` is still necessary when you need to explictly advance the event loop, for operations such as asynchronous callbacks or promise resolution.*

Expand Down Expand Up @@ -140,5 +140,5 @@ it('will catch the error using a promise', () => {

## What's Next

- Integrate `vue-test-utils` into your project by [choosing a test runner](./choosing-a-test-runner.md).
- Integrate Vue Test Utils into your project by [choosing a test runner](./choosing-a-test-runner.md).
- Learn more about [common techniques when writing tests](./common-tips.md).
2 changes: 1 addition & 1 deletion docs/en/guides/testing-SFCs-with-jest.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Jest is a test runner developed by Facebook, aiming to deliver a battery-include

We will assume you are starting with a setup that already has webpack, vue-loader and Babel properly configured - e.g. the `webpack-simple` template scaffolded by `vue-cli`.

The first thing to do is install Jest and `vue-test-utils`:
The first thing to do is install Jest and Vue Test Utils:

```bash
$ npm install --save-dev jest @vue/test-utils
Expand Down
4 changes: 2 additions & 2 deletions docs/en/guides/testing-SFCs-with-mocha-webpack.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ module.exports = {

### Setting Up Browser Environment

`vue-test-utils` requires a browser environment to run. We can simulate it in Node using `jsdom-global`:
Vue Test Utils requires a browser environment to run. We can simulate it in Node using `jsdom-global`:

```bash
npm install --save-dev jsdom jsdom-global
Expand All @@ -90,7 +90,7 @@ Then in `test/setup.js`:
require('jsdom-global')()
```

This adds a browser environment to Node, so that `vue-test-utils` can run correctly.
This adds a browser environment to Node, so that Vue Test Utils can run correctly.

### Picking an Assertion Library

Expand Down
2 changes: 1 addition & 1 deletion docs/en/guides/testing-async-components.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Testing Asynchronous Behavior

To simplify testing, `vue-test-utils` applies DOM updates _synchronously_. However, there are some techniques you need to be aware of when testing a component with asynchronous behavior such as callbacks or promises.
To simplify testing, Vue Test Utils applies DOM updates _synchronously_. However, there are some techniques you need to be aware of when testing a component with asynchronous behavior such as callbacks or promises.

One of the most common asynchronous behaviors is API calls and Vuex actions. The following examples shows how to test a method that makes an API call. This example uses Jest to run the test and to mock the HTTP library `axios`. More about Jest manual mocks can be found [here](https://facebook.github.io/jest/docs/en/manual-mocks.html#content).

Expand Down
6 changes: 3 additions & 3 deletions docs/en/guides/using-with-vuex.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Using with Vuex

In this guide, we'll see how to test Vuex in components with `vue-test-utils`, and how to approach testing a Vuex store.
In this guide, we'll see how to test Vuex in components with Vue Test Utils, and how to approach testing a Vuex store.

## Testing Vuex in components

Expand Down Expand Up @@ -105,7 +105,7 @@ Now the way we define the store might look a bit foreign to you.

We’re using `beforeEach` to ensure we have a clean store before each test. `beforeEach` is a mocha hook that’s called before each test. In our test, we are reassigning the store variables value. If we didn’t do this, the mock functions would need to be automatically reset. It also lets us change the state in our tests, without it affecting later tests.

The most important thing to note in this test is that **we create a mock Vuex store and then pass it to `vue-test-utils`**.
The most important thing to note in this test is that **we create a mock Vuex store and then pass it to Vue Test Utils**.

Great, so now we can mock actions, let’s look at mocking getters.

Expand Down Expand Up @@ -285,7 +285,7 @@ export default {

### Testing getters, mutations, and actions separately

Getters, mutations, and actions are all JavaScript functions, so we can test them without using `vue-test-utils` and Vuex.
Getters, mutations, and actions are all JavaScript functions, so we can test them without using Vue Test Utils and Vuex.

The benefit to testing getters, mutations, and actions separately is that your unit tests are detailed. When they fail, you know exactly what is wrong with your code. The downside is that you will need to mock Vuex funtions, like `commit` and `dispatch`. This can lead to a situation where your unit tests pass, but your production code fails because your mocks are incorrect.

Expand Down
4 changes: 2 additions & 2 deletions docs/zh-cn/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# vue-test-utils
# Vue Test Utils

`vue-test-utils` 是 Vue.js 官方的单元测试实用工具库。
Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。

## 目录

Expand Down
2 changes: 1 addition & 1 deletion docs/zh-cn/api/components/README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# 组件

`vue-test-utils` 包含了用做存根的实用组件。
Vue Test Utils 包含了用做存根的实用组件。

默认情况下 [TransitionStub](./TransitionStub.md) 和 [TransitionGroupStub](./TransitionGroupStub.md) 用来存根 `transition` 和 `transition-group` 组件。你也可以通过配置信息来编辑存根。
2 changes: 1 addition & 1 deletion docs/zh-cn/api/components/TransitionGroupStub.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

一个用来存根 `transition-group` 组件的组件。与其异步完成过渡动画不同的是,它会同步返回子组件。

它在 `vue-test-utils` 默认配置中用来存根所有的 `transition-group` 组件。将 `config.stubs['transition-group']` 设为 `false` 可以使用内建的 `transition-group` 组件:
它在 Vue Test Utils 默认配置中用来存根所有的 `transition-group` 组件。将 `config.stubs['transition-group']` 设为 `false` 可以使用内建的 `transition-group` 组件:

```js
import { config } from '@vue/test-utils'
Expand Down
2 changes: 1 addition & 1 deletion docs/zh-cn/api/components/TransitionStub.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

一个用来存根 `transition` 组件的组件。与其异步完成过渡动画不同的是,它会同步返回子组件。

它在 `vue-test-utils` 默认配置中用来存根所有的 `transition` 组件。将 `config.stubs.transition` 设为 `false` 可以使用内建的 `transition` 组件:
它在 Vue Test Utils 默认配置中用来存根所有的 `transition` 组件。将 `config.stubs.transition` 设为 `false` 可以使用内建的 `transition` 组件:


```js
Expand Down
4 changes: 2 additions & 2 deletions docs/zh-cn/api/config.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# 配置

`vue-test-utils` 包含了一个定义其选项的配置对象。
Vue Test Utils 包含了一个定义其选项的配置对象。

## `vue-test-utils` 配置选项
## Vue Test Utils 配置选项

### `stubs`

Expand Down
4 changes: 2 additions & 2 deletions docs/zh-cn/api/options.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# 挂载选项

即 `mount` 和 `shallow` 的选项。该对象同时包含了 `vue-test-utils` 挂载选项和其它选项。
即 `mount` 和 `shallow` 的选项。该对象同时包含了 Vue Test Utils 挂载选项和其它选项。

## `vue-test-utils` 特定的挂载选项
## Vue Test Utils 特定的挂载选项

- [`context`](#context)
- [`slots`](#slots)
Expand Down
4 changes: 2 additions & 2 deletions docs/zh-cn/api/selectors.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ expect(wrapper.is(Foo)).toBe(true)

### Name

`vue-test-utils` 允许通过一个查找选项对象在组件包裹器上根据一个组件的 `name` 选择元素。
Vue Test Utils 允许通过一个查找选项对象在组件包裹器上根据一个组件的 `name` 选择元素。


```js
Expand All @@ -54,7 +54,7 @@ buttonWrapper.trigger('click')

### Ref

`vue-test-utils` 允许通过一个查找选项对象在组件包裹器上根据 `$ref` 选择元素。
Vue Test Utils 允许通过一个查找选项对象在组件包裹器上根据 `$ref` 选择元素。

```js
const buttonWrapper = wrapper.find({ ref: 'myButton' })
Expand Down
4 changes: 2 additions & 2 deletions docs/zh-cn/api/wrapper/README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# `Wrapper`

`vue-test-utils` 是一个基于包裹器的 API。
Vue Test Utils 是一个基于包裹器的 API。

一个 `Wrapper` 是一个包括了一个挂载组件或 vnode,以及测试该组件或 vnode 的方法。

- **属性:**

`vm` `Component`:这是该 Vue 实例。你可以通过 `wrapper.vm` 访问一个实例所有的[方法和属性](https://vuejs.org/v2/api/#Instance-Properties)。这只存在于 Vue 组件包裹器中
`element` `HTMLElement`:包裹器的根 DOM 节点
`options` `Object`:一个对象,包含传递给 `mount` 或 `shallow` 的 `vue-test-utils` 选项
`options` `Object`:一个对象,包含传递给 `mount` 或 `shallow` 的 Vue Test Utils 选项
`options.attachedToDom` `Boolean`:如果 `attachToDom` 传递给了 `mount` 或 `shallow` 则为真

- **方法:**
Expand Down
4 changes: 2 additions & 2 deletions docs/zh-cn/guides/choosing-a-test-runner.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

测试运行器 (test runner) 就是运行测试的程序。

主流的 JavaScript 测试运行器有很多,但 `vue-test-utils` 都能够支持。它是测试运行器无关的。
主流的 JavaScript 测试运行器有很多,但 Vue Test Utils 都能够支持。它是测试运行器无关的。

当然在我们选用测试运行器的时候也需要考虑一些事项:功能集合、性能和对单文件组件预编译的支持等。在仔细比对现有的库之后,我们推荐其中的两个测试运行器:

Expand All @@ -12,7 +12,7 @@

## 浏览器环境

`vue-test-utils` 依赖浏览器环境。技术上讲你可以将其运行在一个真实的浏览器,但是我们并不推荐,因为在不同的平台上都启动真实的浏览器是很复杂的。我们推荐取而代之的是用 [JSDOM](https://github.com/tmpvar/jsdom) 在 Node 虚拟浏览器环境运行测试。
Vue Test Utils 依赖浏览器环境。技术上讲你可以将其运行在一个真实的浏览器,但是我们并不推荐,因为在不同的平台上都启动真实的浏览器是很复杂的。我们推荐取而代之的是用 [JSDOM](https://github.com/tmpvar/jsdom) 在 Node 虚拟浏览器环境运行测试。

Jest 测试运行器自动设置了 JSDOM。对于其它测试运行器来说,你可以在你的测试入口处使用 [jsdom-global](https://github.com/rstacruz/jsdom-global) 手动设置 JSDOM。

Expand Down
2 changes: 1 addition & 1 deletion docs/zh-cn/guides/common-tips.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

额外的,对于包含许多子组件的组件来说,整个渲染树可能会非常大。重复渲染所有的子组件可能会让我们的测试变慢。

`vue-test-utils` 允许你通过 `shallow` 方法只挂载一个组件而不渲染其子组件 (即保留它们的存根):
Vue Test Utils 允许你通过 `shallow` 方法只挂载一个组件而不渲染其子组件 (即保留它们的存根):

```js
import { shallow } from '@vue/test-utils'
Expand Down
2 changes: 1 addition & 1 deletion docs/zh-cn/guides/dom-events.md
Original file line number Diff line number Diff line change
Expand Up @@ -209,4 +209,4 @@ describe('键盘事件测试', () => {

## 重要事项

`vue-test-utils` 是同步触发事件。因此 `Vue.nextTick` 不是必须的。
Vue Test Utils 是同步触发事件。因此 `Vue.nextTick` 不是必须的。
Loading