", true) @@ -72,7 +72,7 @@ export function render(_ctx) { const n2 = t0() const n3 = t1() const n4 = t2() - const x4 = _child(n4) + const x4 = _txt(n4) _renderEffect(() => _setText(x4, _toDisplayString(_ctx.msg))) return [n2, n3, n4] }) @@ -144,12 +144,12 @@ const t3 = _template("", true) export function render(_ctx) { const n8 = t3() - _setInsertionState(n8) + _setInsertionState(n8, null) const n0 = _createIf(() => (_ctx.foo), () => { const n2 = t0() return n2 }) - _setInsertionState(n8) + _setInsertionState(n8, null) const n3 = _createIf(() => (_ctx.bar), () => { const n5 = t1() return n5 diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap index f296d7257d0..298d1032c8e 100644 --- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap @@ -261,9 +261,9 @@ export function render(_ctx) { const _component_Foo = _resolveComponent("Foo") const _component_Bar = _resolveComponent("Bar") const n6 = t0() - _setInsertionState(n6) + _setInsertionState(n6, null) const n0 = _createSlot("foo", null) - _setInsertionState(n6) + _setInsertionState(n6, null) const n1 = _createIf(() => (true), () => { const n3 = _createComponentWithFallback(_component_Foo) return n3 diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap index 9a3b88acba3..a4f6bf54747 100644 --- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap @@ -1,24 +1,24 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`v-text > should convert v-text to setText 1`] = ` -"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue'; +"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue'; const t0 = _template("
bar
') + const { container } = await mountWithHydration( + `foo
bar
with newlines at the beginning', async () => {
+ await mountWithHydration(
+ `\n
`,
+ `{{data}}`,
+ ref('\n'),
+ )
+
+ await mountWithHydration(
+ `\n
`,
+ ``,
+ ref('\n'),
+ )
+
+ await mountWithHydration(
+ `\n
`,
+ ``,
+ ref({ textContent: '\n' }),
+ )
+ expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
+ })
+
+ test('boolean attr handling', async () => {
+ await mountWithHydration(
+ ``,
+ ``,
+ ref(false),
+ )
+
+ await mountWithHydration(
+ ``,
+ ``,
+ ref(true),
+ )
+
+ await mountWithHydration(
+ ``,
+ ``,
+ ref(true),
+ )
+ expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+ })
+
+ test('client value is null or undefined', async () => {
+ await mountWithHydration(
+ ``,
+ ``,
+ ref(undefined),
+ )
+ expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+ await mountWithHydration(``, ``, ref(null))
+ expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+ })
+
+ test('should not warn against object values', async () => {
+ await mountWithHydration(``, ``, ref({}))
+ expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+ })
+
+ test('should not warn on falsy bindings of non-property keys', async () => {
+ await mountWithHydration(
+ ``,
+ ``,
+ ref(undefined),
+ )
+ expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+ })
+
+ test('should not warn on non-renderable option values', async () => {
+ await mountWithHydration(
+ ``,
+ ``,
+ ref(['foo']),
+ )
+ expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+ })
+
+ test.todo('should not warn css v-bind', () => {
+ // const container = document.createElement('div')
+ // container.innerHTML = ``
+ // const app = createSSRApp({
+ // setup() {
+ // useCssVars(() => ({
+ // foo: 'red',
+ // }))
+ // return () => h('div', { style: { color: 'var(--foo)' } })
+ // },
+ // })
+ // app.mount(container)
+ // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+ })
+
+ test.todo(
+ 'css vars should only be added to expected on component root dom',
+ () => {
+ // const container = document.createElement('div')
+ // container.innerHTML = ``
+ // const app = createSSRApp({
+ // setup() {
+ // useCssVars(() => ({
+ // foo: 'red',
+ // }))
+ // return () =>
+ // h('div', null, [h('div', { style: { color: 'var(--foo)' } })])
+ // },
+ // })
+ // app.mount(container)
+ // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+ },
)
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"foo"`,
+
+ test.todo('css vars support fallthrough', () => {
+ // const container = document.createElement('div')
+ // container.innerHTML = ``
+ // const app = createSSRApp({
+ // setup() {
+ // useCssVars(() => ({
+ // foo: 'red',
+ // }))
+ // return () => h(Child)
+ // },
+ // })
+ // const Child = {
+ // setup() {
+ // return () => h('div', { style: 'padding: 4px' })
+ // },
+ // }
+ // app.mount(container)
+ // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+ })
+
+ // vapor directive does not have a created hook
+ test('should not warn for directives that mutate DOM in created', () => {
+ // const container = document.createElement('div')
+ // container.innerHTML = ``
+ // const vColor: ObjectDirective = {
+ // created(el, binding) {
+ // el.classList.add(binding.value)
+ // },
+ // }
+ // const app = createSSRApp({
+ // setup() {
+ // return () =>
+ // withDirectives(h('div', { class: 'test' }), [[vColor, 'red']])
+ // },
+ // })
+ // app.mount(container)
+ // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+ })
+
+ test.todo('escape css var name', () => {
+ // const container = document.createElement('div')
+ // container.innerHTML = ``
+ // const app = createSSRApp({
+ // setup() {
+ // useCssVars(() => ({
+ // 'foo.bar': 'red',
+ // }))
+ // return () => h(Child)
+ // },
+ // })
+ // const Child = {
+ // setup() {
+ // return () => h('div', { style: 'padding: 4px' })
+ // },
+ // }
+ // app.mount(container)
+ // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+ })
+ })
+
+ describe('data-allow-mismatch', () => {
+ test('element text content', async () => {
+ const data = ref({ textContent: 'bar' })
+ const { container } = await mountWithHydration(
+ `foo`,
+ ``,
+ data,
+ )
+ expect(container.innerHTML).toBe(
+ 'bar',
+ )
+ expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
+ })
+ // test('not enough children', () => {
+ // const { container } = mountWithHydration(
+ // ``,
+ // () => h('div', [h('span', 'foo'), h('span', 'bar')]),
+ // )
+ // expect(container.innerHTML).toBe(
+ // 'foobar',
+ // )
+ // expect(`Hydration children mismatch`).not.toHaveBeenWarned()
+ // })
+ // test('too many children', () => {
+ // const { container } = mountWithHydration(
+ // `foobar`,
+ // () => h('div', [h('span', 'foo')]),
+ // )
+ // expect(container.innerHTML).toBe(
+ // 'foo',
+ // )
+ // expect(`Hydration children mismatch`).not.toHaveBeenWarned()
+ // })
+ test('complete mismatch', async () => {
+ const { container } = await mountWithHydration(
+ `foo`,
+ `foo `,
+ ref('span'),
+ )
+ expect(container.innerHTML).toBe(
+ 'foo',
+ )
+ expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+ })
+ // test('fragment mismatch removal', () => {
+ // const { container } = mountWithHydration(
+ // `foobar`,
+ // () => h('div', [h('span', 'replaced')]),
+ // )
+ // expect(container.innerHTML).toBe(
+ // 'replaced',
+ // )
+ // expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+ // })
+ // test('fragment not enough children', () => {
+ // const { container } = mountWithHydration(
+ // `foobaz`,
+ // () => h('div', [[h('div', 'foo'), h('div', 'bar')], h('div', 'baz')]),
+ // )
+ // expect(container.innerHTML).toBe(
+ // 'foobarbaz',
+ // )
+ // expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+ // })
+ // test('fragment too many children', () => {
+ // const { container } = mountWithHydration(
+ // `foobarbaz`,
+ // () => h('div', [[h('div', 'foo')], h('div', 'baz')]),
+ // )
+ // expect(container.innerHTML).toBe(
+ // 'foobaz',
+ // )
+ // // fragment ends early and attempts to hydrate the extra bar
+ // // as 2nd fragment child.
+ // expect(`Hydration text content mismatch`).not.toHaveBeenWarned()
+ // // excessive children removal
+ // expect(`Hydration children mismatch`).not.toHaveBeenWarned()
+ // })
+ // test('comment mismatch (element)', () => {
+ // const { container } = mountWithHydration(
+ // ``,
+ // () => h('div', [createCommentVNode('hi')]),
+ // )
+ // expect(container.innerHTML).toBe(
+ // '',
+ // )
+ // expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+ // })
+ // test('comment mismatch (text)', () => {
+ // const { container } = mountWithHydration(
+ // `foobar`,
+ // () => h('div', [createCommentVNode('hi')]),
+ // )
+ // expect(container.innerHTML).toBe(
+ // '',
+ // )
+ // expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+ // })
+ test('class mismatch', async () => {
+ await mountWithHydration(
+ ``,
+ ``,
+ ref('foo'),
+ )
+ expect(`Hydration class mismatch`).not.toHaveBeenWarned()
+ })
+
+ test('style mismatch', async () => {
+ await mountWithHydration(
+ ``,
+ ``,
+ ref({ color: 'green' }),
+ )
+ expect(`Hydration style mismatch`).not.toHaveBeenWarned()
+ })
+
+ test('attr mismatch', async () => {
+ await mountWithHydration(
+ ``,
+ ``,
+ ref('foo'),
+ )
+
+ await mountWithHydration(
+ ``,
+ ``,
+ ref('foo'),
+ )
+
+ expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+ })
+ })
+
+ describe.todo('Teleport')
+
+ describe.todo('Suspense')
+})
+
+describe('VDOM interop', () => {
+ test('basic render vapor component', async () => {
+ const data = ref(true)
+ const { container } = await testWithVDOMApp(
+ `
+
+ {{data}} `,
+ vapor: false,
+ },
+ },
+ data,
)
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"foo-foo-"`,
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ true
+ "
+ `,
)
- data.value = 'bar'
+ data.value = false
await nextTick()
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"bar-bar-"`,
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ false
+ "
+ `,
)
})
- test('fragment component with prepend', async () => {
- const { container, data } = await testHydration(
- `
-
+
+ {{data}} vapor fallback
+
+
+ `,
+ vapor: true,
+ },
+ VdomChild: {
+ code: `
+ vdom fallback `,
+ vapor: false,
+ },
+ },
+ data,
)
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"foo-foo-"`,
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ true vapor fallback
+ "
+ `,
)
- data.value = 'bar'
+ data.value = false
await nextTick()
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"bar-bar-"`,
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ false vapor fallback
+ "
+ `,
)
})
- test('nested fragment components', async () => {
- const { container, data } = await testHydration(
- `
-
+
+ {{data}} vapor fallback
+
+
+ `,
+ vapor: true,
+ },
+ VaporChild2: {
+ code: `vapor fallback2 `,
+ vapor: true,
+ },
},
+ data,
)
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"foo-foo-"`,
+
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ true vapor fallback
+ "
+ `,
)
- data.value = 'bar'
+ data.value = false
await nextTick()
- expect(container.innerHTML).toMatchInlineSnapshot(
- `"bar-bar-"`,
+ expect(formatHtml(container.innerHTML)).toMatchInlineSnapshot(
+ `
+ "
+ false vapor fallback
+ "
+ `,
)
})
- // problem is the placeholder does not exist in SSR output
- test.todo('component with anchor insertion', async () => {
- const { container, data } = await testHydration(
- `
+ test('vapor slot render vdom component', async () => {
+ const data = ref(true)
+ const { container } = await testWithVDOMApp(
+ `
-
-
-
+
+ `,
{
- Child: `{{ data }}`,
+ VaporChild: {
+ code: `
+
+ `,
{
- Child: `{{ data }}`,
+ VaporChild: {
+ code: `Async component
"`,
- // )
-
- // // hydration
- // let clientResolve: any
- // AsyncComp = defineAsyncComponent(
- // () =>
- // new Promise(r => {
- // clientResolve = r
- // }),
- // )
-
- // const container = document.createElement('div')
- // container.innerHTML = html
- // createSSRApp(App).mount(container)
-
- // // resolve
- // clientResolve(Comp)
- // await new Promise(r => setTimeout(r))
-
- // // should be hydrated now
- // expect(`Hydration node mismatch`).not.toHaveBeenWarned()
- // expect(container.innerHTML).toMatchInlineSnapshot(
- // `"worldAsync component
"`,
- // )
- // })
-
- // test('hydrate safely when property used by async setup changed before render', async () => {
- // const toggle = ref(true)
-
- // const AsyncComp = {
- // async setup() {
- // await new Promise(r => setTimeout(r, 10))
- // return () => h('h1', 'Async component')
- // },
- // }
-
- // const AsyncWrapper = {
- // render() {
- // return h(AsyncComp)
- // },
- // }
-
- // const SiblingComp = {
- // setup() {
- // toggle.value = false
- // return () => h('span')
- // },
- // }
-
- // const App = {
- // setup() {
- // return () =>
- // h(
- // Suspense,
- // {},
- // {
- // default: () => [
- // h('main', {}, [
- // h(AsyncWrapper, {
- // prop: toggle.value ? 'hello' : 'world',
- // }),
- // h(SiblingComp),
- // ]),
- // ],
- // },
- // )
- // },
- // }
-
- // // server render
- // const html = await renderToString(h(App))
-
- // expect(html).toMatchInlineSnapshot(
- // `"Async component
Async component
(r => setTimeout(r, 10))
- // return () => h('h1', 'Async component')
- // },
- // }
-
- // const AsyncWrapper = { render: () => h(AsyncComp) }
- // const AsyncWrapperWrapper = { render: () => h(AsyncWrapper) }
-
- // const SiblingComp = {
- // setup() {
- // toggle.value = false
- // return () => h('span')
- // },
- // }
-
- // const App = {
- // setup() {
- // return () =>
- // h(
- // Suspense,
- // {},
- // {
- // default: () => [
- // h('main', {}, [
- // h(AsyncWrapperWrapper, {
- // prop: toggle.value ? 'hello' : 'world',
- // }),
- // h(SiblingComp),
- // ]),
- // ],
- // },
- // )
- // },
- // }
-
- // // server render
- // const html = await renderToString(h(App))
-
- // expect(html).toMatchInlineSnapshot(
- // `"Async component
Async component
& {
- // el: Element
- // }
- // ).el instanceof SVGElement,
- // )
- // })
-
- // test('force hydrate prop with `.prop` modifier', () => {
- // const { container } = mountWithHydration('', () =>
- // h('input', {
- // type: 'checkbox',
- // '.indeterminate': true,
- // }),
- // )
- // expect((container.firstChild! as any).indeterminate).toBe(true)
- // })
-
- // test('force hydrate input v-model with non-string value bindings', () => {
- // const { container } = mountWithHydration(
- // '',
- // () =>
- // withDirectives(
- // createVNode(
- // 'input',
- // { type: 'checkbox', 'true-value': true },
- // null,
- // PatchFlags.PROPS,
- // ['true-value'],
- // ),
- // [[vModelCheckbox, true]],
- // ),
- // )
- // expect((container.firstChild as any)._trueValue).toBe(true)
- // })
-
- // test('force hydrate checkbox with indeterminate', () => {
- // const { container } = mountWithHydration(
- // '',
- // () =>
- // createVNode(
- // 'input',
- // { type: 'checkbox', indeterminate: '' },
- // null,
- // PatchFlags.CACHED,
- // ),
- // )
- // expect((container.firstChild as any).indeterminate).toBe(true)
- // })
-
- // test('force hydrate select option with non-string value bindings', () => {
- // const { container } = mountWithHydration(
- // '',
- // () =>
- // h('select', [
- // // hoisted because bound value is a constant...
- // createVNode('option', { value: true }, null, -1 /* HOISTED */),
- // ]),
- // )
- // expect((container.firstChild!.firstChild as any)._value).toBe(true)
- // })
-
- // // #7203
- // test('force hydrate custom element with dynamic props', () => {
- // class MyElement extends HTMLElement {
- // foo = ''
- // constructor() {
- // super()
- // }
- // }
- // customElements.define('my-element-7203', MyElement)
-
- // const msg = ref('bar')
- // const container = document.createElement('div')
- // container.innerHTML = '
- //
- //
- // `,
- // }).mount(container)
-
- // expect(container.firstChild).toMatchInlineSnapshot(`
- //
- // `)
-
- // triggerEvent('click', container.querySelector('button')!)
- // await nextTick()
- // expect(container.firstChild).toMatchInlineSnapshot(`
- //
- // `)
- // })
-
- // test('Suspense + transition appear', async () => {
- // const { vnode, container } = mountWithHydration(
- // `foo`,
- // () =>
- // h(Suspense, {}, () =>
- // h(
- // Transition,
- // { appear: true },
- // {
- // default: () => h('div', 'foo'),
- // },
- // ),
- // ),
- // )
-
- // expect(vnode.el).toBe(container.firstChild)
- // // wait for hydration to finish
- // await new Promise(r => setTimeout(r))
-
- // expect(container.firstChild).toMatchInlineSnapshot(`
- //
- // foo
- //
- // `)
- // await nextTick()
- // expect(vnode.el).toBe(container.firstChild)
- // })
-
- // // #10607
- // test('update component stable slot (prod + optimized mode)', async () => {
- // __DEV__ = false
- // try {
- // const container = document.createElement('div')
- // container.innerHTML = `0`
- // const Comp = {
- // render(this: any) {
- // return (
- // openBlock(),
- // createElementBlock('div', null, [
- // renderSlot(this.$slots, 'default'),
- // ])
- // )
- // },
- // }
- // const show = ref(false)
- // const clicked = ref(false)
-
- // const Wrapper = {
- // setup() {
- // const items = ref([])
- // onMounted(() => {
- // items.value = [1]
- // })
- // return () => {
- // return (
- // openBlock(),
- // createBlock(Comp, null, {
- // default: withCtx(() => [
- // createElementVNode('div', null, [
- // createElementVNode('div', null, [
- // clicked.value
- // ? (openBlock(),
- // createElementBlock('div', { key: 0 }, 'foo'))
- // : createCommentVNode('v-if', true),
- // ]),
- // ]),
- // createElementVNode(
- // 'div',
- // null,
- // items.value.length,
- // 1 /* TEXT */,
- // ),
- // ]),
- // _: 1 /* STABLE */,
- // })
- // )
- // }
- // },
- // }
- // createSSRApp({
- // components: { Wrapper },
- // data() {
- // return { show }
- // },
- // template: `bar
')
- // expect(`Hydration node mismatch`).toHaveBeenWarnedTimes(2)
- // })
-
- // test('fragment mismatch removal', () => {
- // const { container } = mountWithHydration(
- // `foobar`,
- // () => h('div', [h('span', 'replaced')]),
- // )
- // expect(container.innerHTML).toBe('replaced')
- // expect(`Hydration node mismatch`).toHaveBeenWarned()
- // })
-
- // test('fragment not enough children', () => {
- // const { container } = mountWithHydration(
- // `foobaz`,
- // () => h('div', [[h('div', 'foo'), h('div', 'bar')], h('div', 'baz')]),
- // )
- // expect(container.innerHTML).toBe(
- // 'foobarbaz',
- // )
- // expect(`Hydration node mismatch`).toHaveBeenWarned()
- // })
-
- // test('fragment too many children', () => {
- // const { container } = mountWithHydration(
- // `foobarbaz`,
- // () => h('div', [[h('div', 'foo')], h('div', 'baz')]),
- // )
- // expect(container.innerHTML).toBe(
- // 'foobaz',
- // )
- // // fragment ends early and attempts to hydrate the extra bar
- // // as 2nd fragment child.
- // expect(`Hydration text content mismatch`).toHaveBeenWarned()
- // // excessive children removal
- // expect(`Hydration children mismatch`).toHaveBeenWarned()
- // })
-
- // test('Teleport target has empty children', () => {
- // const teleportContainer = document.createElement('div')
- // teleportContainer.id = 'teleport'
- // document.body.appendChild(teleportContainer)
-
- // mountWithHydration('', () =>
- // h(Teleport, { to: '#teleport' }, [h('span', 'value')]),
- // )
- // expect(teleportContainer.innerHTML).toBe(`value`)
- // expect(`Hydration children mismatch`).toHaveBeenWarned()
- // })
-
- // test('comment mismatch (element)', () => {
- // const { container } = mountWithHydration(``, () =>
- // h('div', [createCommentVNode('hi')]),
- // )
- // expect(container.innerHTML).toBe('')
- // expect(`Hydration node mismatch`).toHaveBeenWarned()
- // })
-
- // test('comment mismatch (text)', () => {
- // const { container } = mountWithHydration(`foobar`, () =>
- // h('div', [createCommentVNode('hi')]),
- // )
- // expect(container.innerHTML).toBe('')
- // expect(`Hydration node mismatch`).toHaveBeenWarned()
- // })
-
- // test('class mismatch', () => {
- // mountWithHydration(``, () =>
- // h('div', { class: ['foo', 'bar'] }),
- // )
- // mountWithHydration(``, () =>
- // h('div', { class: { foo: true, bar: true } }),
- // )
- // mountWithHydration(``, () =>
- // h('div', { class: 'foo bar' }),
- // )
- // // SVG classes
- // mountWithHydration(``, () =>
- // h('svg', { class: 'foo bar' }),
- // )
- // // class with different order
- // mountWithHydration(``, () =>
- // h('div', { class: 'bar foo' }),
- // )
- // expect(`Hydration class mismatch`).not.toHaveBeenWarned()
- // mountWithHydration(``, () =>
- // h('div', { class: 'foo' }),
- // )
- // expect(`Hydration class mismatch`).toHaveBeenWarned()
- // })
-
- // test('style mismatch', () => {
- // mountWithHydration(``, () =>
- // h('div', { style: { color: 'red' } }),
- // )
- // mountWithHydration(``, () =>
- // h('div', { style: `color:red;` }),
- // )
- // mountWithHydration(
- // ``,
- // () => h('div', { style: `font-size: 12px; color:red;` }),
- // )
- // mountWithHydration(``, () =>
- // withDirectives(createVNode('div', { style: 'color: red' }, ''), [
- // [vShow, false],
- // ]),
- // )
- // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
- // mountWithHydration(``, () =>
- // h('div', { style: { color: 'green' } }),
- // )
- // expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
- // })
-
- // test('style mismatch when no style attribute is present', () => {
- // mountWithHydration(``, () =>
- // h('div', { style: { color: 'red' } }),
- // )
- // expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
- // })
-
- // test('style mismatch w/ v-show', () => {
- // mountWithHydration(``, () =>
- // withDirectives(createVNode('div', { style: 'color: red' }, ''), [
- // [vShow, false],
- // ]),
- // )
- // expect(`Hydration style mismatch`).not.toHaveBeenWarned()
- // mountWithHydration(``, () =>
- // withDirectives(createVNode('div', { style: 'color: red' }, ''), [
- // [vShow, false],
- // ]),
- // )
- // expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(1)
- // })
-
- // test('attr mismatch', () => {
- // mountWithHydration(``, () => h('div', { id: 'foo' }))
- // mountWithHydration(``, () =>
- // h('div', { spellcheck: '' }),
- // )
- // mountWithHydration(``, () => h('div', { id: undefined }))
- // // boolean
- // mountWithHydration(`