Skip to content

Update vue-testing-library page #120

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 1 commit into from
May 28, 2019
Merged
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
65 changes: 34 additions & 31 deletions docs/vue-testing-library/intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,30 +24,31 @@ npm install --save-dev vue-testing-library
babel-plugin-transform-runtime
```

```
```json
// package.json
"scripts": {
"test": "jest"
}
"scripts": {
"test": "jest"
}

"jest": {
"moduleDirectories": [
"node_modules",
"src"
],
"moduleFileExtensions": [
"js",
"vue"
],
"testPathIgnorePatterns": [
"/node_modules/"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
}
"jest": {
"moduleDirectories": [
"node_modules",
"src"
],
"moduleFileExtensions": [
"js",
"vue"
],
"testPathIgnorePatterns": [
"/node_modules/"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
}

}
```
```
// .babelrc
{
"presets": [
Expand All @@ -67,14 +68,16 @@ npm install --save-dev vue-testing-library
}
}
}

```
```html
// src/TestComponent.vue
<template>
<div>
<span data-testid="test1">Hello World</span>
</div>
</template>

```
```js
// src/TestComponent.spec.js
import 'jest-dom/extend-expect'
import { render } from 'vue-testing-library'
Expand All @@ -99,9 +102,9 @@ helper methods
2. RenderOptions - an object containing additional information to be passed to
@vue/test-utils mount. This can include:

- store - The object definition of a Vuex store, if present `render` will
- store - The object definition of a Vuex store. If present, `render` will
configure a Vuex store and pass to mount.
- routes - A set of routes, if present render will configure VueRouter and pass
- routes - A set of routes. If present, render will configure VueRouter and pass
to mount.

All additional render options are passed to the vue-test-utils mount function
Expand All @@ -119,16 +122,16 @@ In particular, the `wait` utility can be very important in Vue components,
@vue/test-utils has succeeded in making the majority of updates happen
synchronously however there are occasions when wait will allow the DOM to
update. For example, see
[`here`](https://github.com/dfcook/vue-testing-library/tree/master/tests/__tests__/validate-plugin.js).
[`here`](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/end-to-end.js).

## Examples

You'll find examples of testing with different libraries in
[the test directory](https://github.com/dfcook/vue-testing-library/tree/master/tests/__tests__).
[the test directory](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__).
Some included are:

- [`vuex`](https://github.com/dfcook/vue-testing-library/tree/master/tests/__tests__/vuex.js)
- [`vue-router`](https://github.com/dfcook/vue-testing-library/tree/master/tests/__tests__/vue-router.js)
- [`vee-validate`](https://github.com/dfcook/vue-testing-library/tree/master/tests/__tests__/validate-plugin.js)
- [`vuex`](https://github.com/testing-library/vue-testing-library/blob/master/tests/__tests__/vuex.js)
- [`vue-router`](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/vue-router.js)
- [`vee-validate`](https://github.com/testing-library/vue-testing-library/tree/master/tests/__tests__/validate-plugin.js)

[gh]: https://github.com/dfcook/vue-testing-library
[gh]: https://github.com/testing-library/vue-testing-library