Skip to content

Commit fcd7b67

Browse files
haoqunjianghaoqunjiang
committed
test: add preprocessor test
1 parent 3c669e8 commit fcd7b67

File tree

6 files changed

+84
-12
lines changed

6 files changed

+84
-12
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
},
3737
"devDependencies": {
3838
"@babel/core": "^7.7.7",
39-
"@babel/preset-env": "^7.7.7",
39+
"@babel/preset-env": "^7.11.5",
4040
"@types/estree": "^0.0.45",
4141
"@types/hash-sum": "^1.0.0",
4242
"@types/jest": "^26.0.13",
@@ -46,7 +46,7 @@
4646
"@types/webpack": "^4.41.0",
4747
"@types/webpack-merge": "^4.1.5",
4848
"@vue/compiler-sfc": "^3.0.0-rc.10",
49-
"babel-loader": "^8.0.6",
49+
"babel-loader": "^8.1.0",
5050
"cache-loader": "^4.1.0",
5151
"css-loader": "^4.3.0",
5252
"file-loader": "^6.1.0",

‎test/core.spec.ts‎

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,72 @@
11
import { mockBundleAndRun, normalizeNewline } from './utils'
22

33
test('basic', async () => {
4-
const { window, instance } = await mockBundleAndRun({ entry: 'basic.vue' })
4+
const { window, instance, componentModule } = await mockBundleAndRun({
5+
entry: 'basic.vue',
6+
})
57

68
// <h2 class="red">{{msg}}</h2>
79
expect(instance.$el.tagName).toBe('H2')
810
expect(instance.$el.className).toBe('red')
911
expect(instance.$el.textContent).toBe('Hello from Component A!')
1012

13+
// @ts-ignore
14+
expect(componentModule.data().msg).toContain('Hello from Component A!')
15+
1116
const style = normalizeNewline(
1217
window.document.querySelector('style')!.textContent!
1318
)
1419
expect(style).toContain('comp-a h2 {\n color: #f00;\n}')
1520
})
1621

22+
test('pre-processors', async () => {
23+
// @ts-ignore
24+
const { window, instance, code, componentModule } = await mockBundleAndRun({
25+
entry: 'pre.vue',
26+
module: {
27+
rules: [
28+
{
29+
test: /\.js$/,
30+
exclude: /node_modules/,
31+
loader: 'babel-loader',
32+
options: {
33+
presets: ['@babel/preset-env'],
34+
},
35+
},
36+
{
37+
test: /\.pug$/,
38+
loader: 'pug-plain-loader',
39+
},
40+
{
41+
test: /\.stylus$/,
42+
use: ['style-loader', 'css-loader', 'stylus-loader'],
43+
},
44+
],
45+
},
46+
})
47+
48+
// make sure babel is actually applied
49+
expect(code).toMatch('data: function data()')
50+
51+
// div
52+
// h1 This is the app
53+
// comp-a
54+
// comp-b
55+
expect(instance.$el.children[0].tagName).toBe('H1')
56+
expect(instance.$el.children[1].tagName).toBe('COMP-A')
57+
expect(instance.$el.children[2].tagName).toBe('COMP-B')
58+
59+
// script
60+
// @ts-ignore
61+
expect(componentModule.data().msg).toContain('Hello from Babel')
62+
63+
// style
64+
const style = window.document.querySelector('style')!.textContent!
65+
expect(style).toContain(
66+
'body {\n font: 100% Helvetica, sans-serif;\n color: #999;\n}'
67+
)
68+
})
69+
1770
test('script setup', async () => {
1871
await mockBundleAndRun({ entry: 'ScriptSetup.vue' })
1972
})

‎test/fixtures/entry.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Component from '~target'
44
import * as exports from '~target'
55

66
if (typeof window !== 'undefined') {
7-
window.module = Component
7+
window.componentModule = Component
88
window.exports = exports
99

1010
const app = createApp(Component)

‎test/fixtures/pre.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<style lang="stylus">
2+
font-stack = Helvetica, sans-serif
3+
primary-color = #999
4+
body
5+
font 100% font-stack
6+
color primary-color
7+
</style>
8+
9+
<template lang="pug">
10+
div
11+
h1 This is the app
12+
comp-a
13+
comp-b
14+
</template>
15+
16+
<script>
17+
export default {
18+
data () {
19+
return { msg: 'Hello from Babel' }
20+
}
21+
}
22+
</script>

‎test/utils.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,6 @@ export async function mockBundleAndRun(
141141
) {
142142
const { code, stats } = await bundle(options, wontThrowError)
143143

144-
let jsdomError
145144
const dom = new JSDOM(
146145
`<!DOCTYPE html><html><head></head><body><div id="#app"></div></body></html>`,
147146
{
@@ -153,23 +152,21 @@ export async function mockBundleAndRun(
153152
dom.window.eval(code)
154153
} catch (e) {
155154
console.error(`JSDOM error:\n${e.stack}`)
156-
jsdomError = e
155+
throw new Error(e)
157156
}
158157

159158
const { window } = dom
160-
const { module, exports, instance } = window
159+
const { componentModule, exports, instance } = window
161160

162161
return {
163162
window,
164163

165-
module,
164+
componentModule,
166165
exports,
167166
instance,
168167

169168
code,
170169
stats,
171-
172-
jsdomError,
173170
}
174171
}
175172

‎yarn.lock‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -717,7 +717,7 @@
717717
"@babel/helper-create-regexp-features-plugin" "^7.10.4"
718718
"@babel/helper-plugin-utils" "^7.10.4"
719719

720-
"@babel/preset-env@^7.7.7":
720+
"@babel/preset-env@^7.11.5":
721721
version "7.11.5"
722722
resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.11.5.tgz#18cb4b9379e3e92ffea92c07471a99a2914e4272"
723723
integrity sha512-kXqmW1jVcnB2cdueV+fyBM8estd5mlNfaQi6lwLgRwCby4edpavgbFhiBNjmWA3JpB/yZGSISa7Srf+TwxDQoA==
@@ -1848,7 +1848,7 @@ babel-jest@^26.3.0:
18481848
graceful-fs "^4.2.4"
18491849
slash "^3.0.0"
18501850

1851-
babel-loader@^8.0.6:
1851+
babel-loader@^8.1.0:
18521852
version "8.1.0"
18531853
resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
18541854
integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==

0 commit comments

Comments
 (0)