Repository: vuejs/vue-next
File: packages/runtime-core/__tests__/hydration.spec.ts (TypeScript)

Code before:
    )
    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 = '<my-element-7203></my-element-7203>'
    const app = createSSRApp({
      render: () => h('my-element-7203', { foo: msg.value }),
    })
    app.mount(container)
    expect((container.firstChild as any).foo).toBe(msg.value)
  })

  test('should not render ref on custom element during hydration', () => {
    const container = document.createElement('div')
    container.innerHTML = '<my-element>hello</my-element>'
    const root = ref()
    const app = createSSRApp({
      render: () =>
        h('my-element', {
          ref: root,
          innerHTML: 'hello',
        }),
    })
    app.mount(container)
    expect(container.innerHTML).toBe('<my-element>hello</my-element>')
    expect((container.firstChild as Element).hasAttribute('ref')).toBe(false)
  })

  // #5728
  test('empty text node in slot', () => {
    const Comp = {
      render(this: any) {
        return renderSlot(this.$slots, 'default', {}, () => [
          createTextVNode(''),
        ])
      },
    }
    const { container, vnode } = mountWithHydration('<!--[--><!--]-->', () =>
      h(Comp),

Review comment (suggestion):
```suggestion
  // #14274
  test('should not render ref on custom element during hydration', () => {
```

Code after:
    )
    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 = '<my-element-7203></my-element-7203>'
    const app = createSSRApp({
      render: () => h('my-element-7203', { foo: msg.value }),
    })
    app.mount(container)
    expect((container.firstChild as any).foo).toBe(msg.value)
  })

  // #14274
  test('should not render ref on custom element during hydration', () => {
    const container = document.createElement('div')
    container.innerHTML = '<my-element>hello</my-element>'
    const root = ref()
    const app = createSSRApp({
      render: () =>
        h('my-element', {
          ref: root,
          innerHTML: 'hello',
        }),
    })
    app.mount(container)
    expect(container.innerHTML).toBe('<my-element>hello</my-element>')
    expect((container.firstChild as Element).hasAttribute('ref')).toBe(false)
    expect(root.value).toBe(container.firstChild)
  })

  // #5728
  test('empty text node in slot', () => {
    const Comp = {
      render(this: any) {
        return renderSlot(this.$slots, 'default', {}, () => [
          createTextVNode(''),
        ])
      },
    }