Skip to content
This repository was archived by the owner on Dec 26, 2018. It is now read-only.

Commit 8445f03

Browse files
yyx990803yyx990803
committed
init
0 parents  commit 8445f03

16 files changed

+9651
-0
lines changed

‎.babelrc

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"presets": [
3+
["env", { "modules": false }]
4+
],
5+
"env": {
6+
"test": {
7+
"presets": [
8+
["env", { "targets": { "node": 8 }}]
9+
]
10+
}
11+
}
12+
}

‎.gitignore

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
npm-debug.log
5+
yarn-error.log
6+
7+
# Editor directories and files
8+
.idea
9+
*.suo
10+
*.ntvs*
11+
*.njsproj
12+
*.sln

‎README.md

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
# vue-test-utils-jest-example
2+
3+
> Example project using Jest + vue-test-utils together
4+
5+
This is based on the `vue-cli` `webpack-simple` template. Test-specific changes include:
6+
7+
### Additional Dependencies
8+
9+
- `vue-test-utils`
10+
- `jest`
11+
- `babel-jest` (for ES2015+ features in tests)
12+
- `jest-vue` (for handling `*.vue` files in tests)
13+
- `jest-vue-serializer` (for snapshot tests)
14+
15+
### Additional Configuration
16+
17+
#### `package.json`
18+
19+
The following configurations are recommended for Jest:
20+
21+
``` js
22+
{
23+
"jest": {
24+
"moduleFileExtensions": [
25+
"js",
26+
"json",
27+
// tell Jest to handle *.vue files
28+
"vue"
29+
],
30+
"transform": {
31+
// process js with babel-jest
32+
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
33+
// process *.vue files with jest-vue
34+
".*\\.(vue)$": "<rootDir>/node_modules/jest-vue"
35+
},
36+
// support the same @ -> src alias mapping in source code
37+
"moduleNameMapper": {
38+
"^@/(.*)$": "<rootDir>/src/$1"
39+
},
40+
// serializer for snapshots
41+
"snapshotSerializers": [
42+
"<rootDir>/node_modules/jest-serializer-vue"
43+
],
44+
"mapCoverage": true
45+
}
46+
}
47+
```
48+
49+
#### `.babelrc`
50+
51+
Our default Babel config disables ES modules transpilation because webpack already knows how to handle ES modules. However, we do need to enable it for our tests because Jest tests are run directly in Node.
52+
53+
Also, if our tests are run in a relatively newer version of Node, most of the ES features are already supported - we can tell `babel-preset-env` to target the Node version we are using. This skips transpiling unnecessary features and makes our tests boot faster.
54+
55+
To apply these options only for tests, we need to add a separate config under `env.test` (this will be automatically picked up by `babel-jest`):
56+
57+
``` json
58+
{
59+
"presets": [
60+
["env", { "modules": false }]
61+
],
62+
"env": {
63+
"test": {
64+
"presets": [
65+
["env", { "targets": { "node": 8 }}]
66+
]
67+
}
68+
}
69+
}
70+
```
71+
72+
### Build Commands
73+
74+
``` bash
75+
# install dependencies
76+
npm install
77+
78+
# serve with hot reload at localhost:8080
79+
npm run dev
80+
81+
# build for production with minification
82+
npm run build
83+
84+
# run tests
85+
npm test
86+
```
87+
88+
For detailed explanation on how things work, consult the [docs for vue-test-utils](https://vue-test-utils.vuejs.org/en/guides/testing-SFCs-with-jest.html).

‎index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>vue-test-utils-jest-example-2</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script src="/dist/build.js"></script>
10+
</body>
11+
</html>

0 commit comments

Comments
 (0)