├── .gitignore
├── README.md
├── babel.config.js
├── index.d.ts
├── index.html
├── jest.config.js
├── package.json
├── src
├── App.spec.ts
├── App.vue
├── Hello.vue
└── main.ts
├── tsconfig.json
├── vue-shims.d.ts
├── webpack.config.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Demo repo for vue-test-utils-next + TS + vue-jest.
2 |
3 | 1. `yarn install`
4 | 2. `yarn test` to run tests.
5 | 3. `yarn webpack-dev-server` for development mode.
6 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | ['@babel/preset-env',
4 | {
5 | targets: {
6 | node: 'current'
7 | }
8 | }
9 | ]
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 | const Comp: any
3 | export default Comp
4 | }
5 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | preset: 'ts-jest',
3 | globals: {},
4 | testEnvironment: 'jsdom',
5 | transform: {
6 | "^.+\\.vue$": "vue-jest",
7 | "^.+\\js$": "babel-jest"
8 | },
9 | moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'ts', 'tsx', 'node']
10 | }
11 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vtu-next-demo",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "license": "MIT",
6 | "scripts": {
7 | "test": "yarn jest",
8 | "dev": "yarn webpack-dev-server"
9 | },
10 | "devDependencies": {
11 | "@babel/node": "^7.8.7",
12 | "@babel/preset-env": "^7.9.0",
13 | "@types/jest": "^25.2.1",
14 | "@types/moment": "^2.13.0",
15 | "@vue/compiler-sfc": "^3.0.0-alpha.11",
16 | "@vue/test-utils": "^2.0.0-alpha.8",
17 | "babel-jest": "^25.2.6",
18 | "flush-promises": "^1.0.2",
19 | "jest": "^25.2.7",
20 | "ts-jest": "^25.3.1",
21 | "ts-loader": "^6.2.2",
22 | "typescript": "^3.8.3",
23 | "vue-jest": "^5.0.0-alpha.1",
24 | "vue-loader": "^16.0.0-alpha.3",
25 | "webpack": "^4.42.1",
26 | "webpack-cli": "^3.3.11",
27 | "webpack-dev-server": "^3.10.3"
28 | },
29 | "dependencies": {
30 | "moment": "^2.24.0",
31 | "vue": "^3.0.0-beta.17",
32 | "vue-router": "^4.0.0-alpha.13"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/App.spec.ts:
--------------------------------------------------------------------------------
1 | import { mount, shallowMount } from '@vue/test-utils'
2 | import App from './App.vue'
3 | import Hello from './Hello.vue'
4 |
5 | test('uses mounts', async () => {
6 | const wrapper = mount(App)
7 | expect(wrapper.html()).toContain('Vue app')
8 | expect(wrapper.html()).toContain('Hello world')
9 | expect(wrapper.html()).toContain('Count: 0')
10 |
11 | await wrapper.find('button').trigger('click')
12 | expect(wrapper.html()).toContain('Count: 1')
13 | })
14 |
15 | test('uses shallowMount', async () => {
16 | const wrapper = shallowMount(App)
17 | expect(wrapper.html()).toContain('Vue app')
18 | expect(wrapper.html()).not.toContain('Hello world')
19 | expect(wrapper.html()).toContain('Count: 0')
20 |
21 | // @ts-ignore TODO: Improve types for `findComponent`
22 | await wrapper.findComponent(Hello).vm.$emit('greet')
23 | expect(wrapper.html()).toContain('Count: 1')
24 | })
25 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | Vue app
4 |
5 | Count: {{ count }}
6 |
7 |
8 |
9 |
33 |
--------------------------------------------------------------------------------
/src/Hello.vue:
--------------------------------------------------------------------------------
1 |
2 | Hello world
3 |
4 |
5 |
18 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 |
3 | import App from './App.vue'
4 | console.log(App)
5 |
6 | createApp(App).mount('#app')
7 |
8 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "esModuleInterop": true,
4 | "target": "es6"
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/vue-shims.d.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lmiller1990/vtu-next-demo/211a3ede4aeb87663b59f7da320f6c3e8f296600/vue-shims.d.ts
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 |
3 | const { VueLoaderPlugin } = require('vue-loader')
4 |
5 | module.exports = {
6 | entry: './src/main.ts',
7 | output: {
8 | path: path.resolve(__dirname, './dist'),
9 | publicPath: '/dist/'
10 | },
11 | module: {
12 | rules: [
13 | {
14 | test: /\.vue$/,
15 | loader: 'vue-loader'
16 | },
17 | {
18 | test: /\.ts$/,
19 | loader: 'ts-loader',
20 | options: {
21 | appendTsSuffixTo: [/\.vue/]
22 | }
23 | }
24 | ]
25 | },
26 | resolve: {
27 | extensions: [ '.tsx', '.ts', '.js' ],
28 | },
29 | plugins: [
30 | new VueLoaderPlugin()
31 | ],
32 | devServer: {
33 | overlay: true
34 | }
35 | }
36 |
--------------------------------------------------------------------------------