Skip to content

Commit 11348c1

Browse files
afontcuafontcu
committed
Merge branch 'next'
2 parents 181765f + ba14df2 commit 11348c1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+1013
-1149
lines changed

‎.babelrc

-8
This file was deleted.

‎.eslintrc.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ module.exports = {
44
},
55
extends: [
66
'./node_modules/kcd-scripts/eslint.js',
7-
'plugin:vue/recommended',
7+
'plugin:vue/vue3-recommended',
8+
'plugin:testing-library/vue',
89
'prettier',
910
],
1011
plugins: ['vue'],
@@ -17,8 +18,8 @@ module.exports = {
1718
'testing-library/prefer-screen-queries': 'off',
1819
'testing-library/no-manual-cleanup': 'off',
1920
'testing-library/no-await-sync-events': 'off',
20-
'testing-library/await-fire-event': 'error',
2121
'testing-library/prefer-user-event': 'off',
2222
'testing-library/no-node-access': 'off',
23+
'testing-library/await-fire-event': 'off',
2324
},
2425
}

‎.github/workflows/validate.yml

+3
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@ jobs:
3232
uses: bahmutov/npm-install@v1
3333
with:
3434
useLockFile: false
35+
# Needed because @vue/apollo-composable requires @vue/composition-api
36+
# which has a peerDep on Vue 2.
37+
install-command: npm i --legacy-peer-deps
3538

3639
- name: ▶️ Run validate script
3740
run: npm run validate

‎README.md

+25-31
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div align="center">
2-
<h1>Vue Testing Library</h1>
2+
<h1>Vue Testing Library for Vue 3</h1>
33

44
<br />
55

@@ -15,11 +15,6 @@
1515
<p>Simple and complete Vue.js testing utilities that encourage good testing practices.</p>
1616

1717
<p>Vue Testing Library is a lightweight adapter built on top of <a href="https://github.com/testing-library/dom-testing-library/">DOM Testing Library</a> and <a href="https://github.com/vuejs/vue-test-utils">@vue/test-utils</a>.</p>
18-
19-
20-
<br />
21-
22-
<p>If you're looking for the Vue 3 version of Vue Testing Library, check out the <a href="https://github.com/testing-library/vue-testing-library/tree/next">next</a> branch.</p>
2318

2419
<br />
2520

@@ -66,30 +61,29 @@
6661
This module is distributed via `npm` and should be installed as one of your
6762
project's `devDependencies`:
6863

69-
If using Vue 2
70-
```
71-
npm install --save-dev @testing-library/vue@5
72-
```
73-
74-
If using Vue 3
7564
```
7665
npm install --save-dev @testing-library/vue
7766
```
7867

79-
This library has `peerDependencies` listings for `Vue` and
68+
This library has `peerDependencies` listings for `Vue 3` and
8069
`vue-template-compiler`.
8170

82-
You may also be interested in installing `@testing-library/jest-dom` so you can
83-
use [the custom Jest matchers][jest-dom].
71+
You may also be interested in installing `jest-dom` so you can use [the custom
72+
Jest matchers][jest-dom].
73+
74+
If you're using Vue 2, please install version 5 of the library:
75+
76+
```
77+
npm install --save-dev @testing-library/vue@^5
78+
```
79+
8480

8581
## A basic example
8682

8783
```html
8884
<template>
89-
<div>
90-
<p>Times clicked: {{ count }}</p>
91-
<button @click="increment">increment</button>
92-
</div>
85+
<p>Times clicked: {{ count }}</p>
86+
<button @click="increment">increment</button>
9387
</template>
9488

9589
<script>
@@ -133,9 +127,9 @@ test('increments value on click', async () => {
133127
})
134128
```
135129

136-
> You might want to install [`@testing-library/jest-dom`][jest-dom] to add handy
137-
> assertions such as `.toBeInTheDocument()`. In the example above, you could
138-
> write `expect(screen.queryByText('Times clicked: 0')).toBeInTheDocument()`.
130+
> You might want to install [`jest-dom`][jest-dom] to add handy assertions such
131+
> as `.toBeInTheDocument()`. In the example above, you could write
132+
> `expect(screen.queryByText('Times clicked: 0')).toBeInTheDocument()`.
139133
140134
> Using `byText` queries it's not the only nor the best way to query for
141135
> elements. Read [Which query should I use?][which-query] to discover
@@ -258,8 +252,8 @@ instead of filing an issue on GitHub.
258252
[npm-badge]: https://badge.fury.io/js/%40testing-library%2Fvue.svg
259253
[npm]: https://badge.fury.io/js/%40testing-library%2Fvue
260254
[license-badge]: https://img.shields.io/github/license/testing-library/vue-testing-library.svg
261-
[license]: https://github.com/testing-library/vue-testing-library/blob/main/LICENSE
262-
[discord]: https://discord.gg/testing-library
255+
[license]: https://github.com/testing-library/vue-testing-library/blob/master/LICENSE
256+
[discord]: https://testing-library.com/discord
263257
[discord-badge]: https://img.shields.io/discord/723559267868737556.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2&style=flat-square
264258
[jest-dom]: https://github.com/testing-library/jest-dom
265259
[which-query]: https://testing-library.com/docs/guide-which-query
@@ -274,11 +268,11 @@ instead of filing an issue on GitHub.
274268
[add-issue-bug]: https://github.com/testing-library/vue-testing-library/issues/new?assignees=&labels=bug&template=bug_report.md&title=
275269
[add-issue]: (https://github.com/testing-library/vue-testing-library/issues/new)
276270

277-
[types-directory]: https://github.com/testing-library/vue-testing-library/blob/main/types
278-
[test-directory]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__
279-
[vuex-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/vuex.js
280-
[vue-router-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/vue-router.js
281-
[vee-validate-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/validate-plugin.js
282-
[vue-i18n-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/translations-vue-i18n.js
283-
[vuetify-example]: https://github.com/testing-library/vue-testing-library/blob/main/src/__tests__/vuetify.js
271+
[types-directory]: https://github.com/testing-library/vue-testing-library/blob/master/types
272+
[test-directory]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__
273+
[vuex-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vuex.js
274+
[vue-router-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vue-router.js
275+
[vee-validate-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/validate-plugin.js
276+
[vue-i18n-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vue-i18n.js
277+
[vuetify-example]: https://github.com/testing-library/vue-testing-library/blob/master/src/__tests__/vuetify.js
284278
<!-- prettier-ignore-end -->

‎babel.config.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = {
2+
sourceType: 'module',
3+
presets: [
4+
[
5+
'@babel/preset-env',
6+
{
7+
targets: {
8+
node: 'current',
9+
esmodules: true,
10+
},
11+
},
12+
],
13+
],
14+
}

‎jest.config.js

+8-5
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,22 @@ const config = require('kcd-scripts/jest')
44
module.exports = merge(config, {
55
testEnvironment: 'jsdom',
66
moduleFileExtensions: ['js', 'vue'],
7-
moduleNameMapper: {
8-
'@testing-library/vue': '<rootDir>/src/index.js',
9-
},
107
coverageDirectory: './coverage',
118
collectCoverageFrom: ['**/src/**/*.js', '!**/src/__tests__/**'],
129
transform: {
1310
'^.+\\.js$': '<rootDir>/node_modules/babel-jest',
14-
'.*\\.(vue)$': '<rootDir>/node_modules/@vue/vue2-jest',
11+
'.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
1512
},
1613
snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
1714
testPathIgnorePatterns: [
18-
'<rootDir>/node_modules',
15+
'<rootDir>/node_modules/',
1916
'<rootDir>/src/__tests__/components',
2017
'<rootDir>/src/__tests__/directives',
2118
],
19+
moduleNameMapper: {
20+
'@vue/apollo-composable': [
21+
'<rootDir>/node_modules/@vue/apollo-composable/dist/index.js',
22+
],
23+
},
24+
transformIgnorePatterns: ['node_modules/(?!(@vue/apollo-composable)/)'],
2225
})

‎package.json

+37-38
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@
1111
"test": "kcd-scripts test",
1212
"test:update": "npm test -- --updateSnapshot --coverage",
1313
"validate": "kcd-scripts validate",
14-
"typecheck": "dtslint ./types/",
14+
"typecheck": "tsd",
1515
"setup": "npm install && npm run validate -s"
1616
},
1717
"engines": {
18-
"node": ">10.18"
18+
"node": ">=12"
1919
},
2020
"files": [
21-
"types/*.d.ts",
21+
"types",
2222
"dist",
2323
"cleanup-after-each.js"
2424
],
@@ -35,52 +35,51 @@
3535
"vue.js testing",
3636
"vue",
3737
"vue testing",
38-
"vue.js 2",
39-
"vue.js 2 testing",
40-
"vue 2",
41-
"vue 2 testing"
38+
"vue.js 3",
39+
"vue.js 3 testing",
40+
"vue 3",
41+
"vue 3 testing"
4242
],
4343
"author": "Daniel Cook",
4444
"license": "MIT",
4545
"dependencies": {
46-
"@babel/runtime": "^7.12.5",
47-
"@testing-library/dom": "^7.26.6",
48-
"@vue/test-utils": "^1.1.0"
46+
"@babel/runtime": "^7.15.4",
47+
"@testing-library/dom": "^8.5.0",
48+
"@vue/test-utils": "^2.0.0-rc.18"
4949
},
5050
"devDependencies": {
51-
"@babel/plugin-transform-runtime": "^7.11.5",
52-
"@testing-library/jest-dom": "^5.11.6",
53-
"@testing-library/user-event": "^12.1.10",
54-
"@types/estree": "0.0.46",
55-
"@vue/vue2-jest": "^27.0.0-alpha.2",
51+
"@apollo/client": "^3.4.11",
52+
"@babel/plugin-transform-runtime": "^7.15.0",
53+
"@testing-library/jest-dom": "^5.14.1",
54+
"@testing-library/user-event": "^13.2.1",
55+
"@types/estree": "^0.0.50",
56+
"@vue/apollo-composable": "^4.0.0-alpha.14",
57+
"@vue/compiler-sfc": "^3.2.12",
5658
"apollo-boost": "^0.4.9",
57-
"apollo-cache-inmemory": "^1.6.6",
58-
"axios": "^0.21.1",
59-
"dtslint": "^4.0.5",
60-
"eslint": "^7.13.0",
61-
"eslint-plugin-vue": "^7.6.0",
62-
"graphql": "^15.3.0",
63-
"graphql-tag": "^2.11.0",
64-
"isomorphic-unfetch": "^3.0.0",
59+
"axios": "^0.20.0",
60+
"element-plus": "^1.3.0-beta.1",
61+
"eslint-plugin-vue": "^8.2.0",
62+
"graphql": "^15.5.3",
63+
"graphql-tag": "^2.12.4",
64+
"isomorphic-unfetch": "^3.1.0",
6565
"jest-serializer-vue": "^2.0.2",
66-
"kcd-scripts": "^11.1.0",
66+
"kcd-scripts": "^10.0.0",
6767
"lodash.merge": "^4.6.2",
68-
"msw": "^0.35.0",
69-
"portal-vue": "^2.1.7",
70-
"semver": "^7.3.5",
71-
"typescript": "^4.0.5",
72-
"vee-validate": "^2.2.15",
73-
"vue": "^2.6.12",
74-
"vue-apollo": "^3.0.4",
75-
"vue-i18n": "^8.21.1",
76-
"vue-router": "^3.4.9",
77-
"vue-template-compiler": "^2.6.12",
78-
"vuetify": "^2.3.17",
79-
"vuex": "^3.5.1"
68+
"msw": "^0.21.3",
69+
"tsd": "^0.19.1",
70+
"typescript": "^4.4.3",
71+
"vee-validate": "^4.3.5",
72+
"vue": "^3.2.12",
73+
"vue-apollo": "^3.0.5",
74+
"vue-i18n": "^9.2.0-beta.26",
75+
"vue-jest": "^5.0.0-alpha.10",
76+
"vue-router": "^4.0.3",
77+
"vuetify": "^v3.0.0-alpha.12",
78+
"vuex": "^4.0.0"
8079
},
8180
"peerDependencies": {
82-
"vue": "^2.6.10",
83-
"vue-template-compiler": "^2.6.10"
81+
"@vue/compiler-sfc": ">= 3",
82+
"vue": ">= 3"
8483
},
8584
"husky": {
8685
"hooks": {

‎src/__tests__/about-vue-router-mocha.js

-21
This file was deleted.

‎src/__tests__/auto-cleanup-skip.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
let render
2-
beforeAll(async () => {
2+
beforeAll(() => {
33
process.env.VTL_SKIP_AUTO_CLEANUP = 'true'
4-
const vtl = await require('@testing-library/vue')
4+
const vtl = require('..')
55
render = vtl.render
66
})
77

‎src/__tests__/auto-cleanup.js

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import {render} from '@testing-library/vue'
1+
import {render} from '..'
22
import '@testing-library/jest-dom'
33

4-
// This just verifies that by importing VTL in an environment which supports
4+
// This verifies that by importing VTL in an environment which supports
55
// afterEach (like jest) we'll get automatic cleanup between tests.
6-
test('render the first component', () => {
7-
render({
8-
template: `<h1>Hello World</h1>`,
9-
})
6+
test('renders the component', () => {
7+
render({template: `<h1>Hello World</h1>`})
8+
109
expect(document.body.innerHTML).toMatchInlineSnapshot(`
1110
<div>
1211
<h1>Hello World</h1>

‎src/__tests__/button-simple.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {render, fireEvent} from '@testing-library/vue'
1+
import {render, fireEvent} from '..'
22
import Button from './components/Button'
33
import '@testing-library/jest-dom'
44

‎src/__tests__/card-slots.js

+4-19
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,17 @@
11
import '@testing-library/jest-dom'
2-
import {render} from '@testing-library/vue'
2+
import {render} from '..'
33
import Card from './components/Card'
44

5-
// In this test file we demo how to test a component with slots and a scoped slot.
6-
7-
// Usage is the same as Vue Test Utils, since slots and scopedSlots
8-
// in the render options are directly passed through to the Utils mount().
9-
// For more, see: https://vue-test-utils.vuejs.org/api/options.html#slots
5+
// Usage is the same as Vue Test Utils, since slots values are passed using the `slots`
6+
// key from mount(). For more, see: https://vue-test-utils.vuejs.org/api/options.html#slots
107
test('Card component', () => {
11-
const {getByText, queryByText} = render(Card, {
8+
const {getByText} = render(Card, {
129
slots: {
1310
header: '<h1>HEADER</h1>',
1411
footer: '<div>FOOTER</div>',
1512
},
16-
scopedSlots: {
17-
default: '<p>Yay! {{props.content}}</p>',
18-
},
1913
})
2014

21-
// The default slot should render the template above with the scoped prop "content".
22-
expect(getByText('Yay! Scoped content!')).toBeInTheDocument()
23-
24-
// Instead of the default slot's fallback content.
25-
expect(
26-
queryByText('Nothing used the Scoped content!'),
27-
).not.toBeInTheDocument()
28-
29-
// And the header and footer slots should be rendered with the given templates.
3015
expect(getByText('HEADER')).toBeInTheDocument()
3116
expect(getByText('FOOTER')).toBeInTheDocument()
3217
})

0 commit comments

Comments
 (0)