Nuxt/packages/nuxt/test/devonly.test.ts

import { describe, expect, it } from 'vitest'
import type { Plugin } from 'vite'
import { DevOnlyPlugin } from '../src/core/plugins/dev-only'
import { normalizeLineEndings } from './utils'

const pluginVite = DevOnlyPlugin.raw({}, { framework: 'vite' }) as Plugin

const viteTransform = async (source: string, id: string) => {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
  const result = await (pluginVite.transform! as Function)(source, id)
  return typeof result === 'string' ? result : result?.code
}

describe('test devonly transform ', () => {
  it('test dev only treeshaking', async () => {
    const result = await viteTransform(`<template>
    <div>
      <LazyDevOnly>
        <SomeDevOnlyComponent></SomeDevOnlyComponent>
      </LazyDevOnly>
    </div>
    <SomeComponent>
      <lazy-dev-only>
        test
      </lazy-dev-only>
    </SomeComponent>
    <div>
      <DevOnly>
        <SomeDevOnlyComponent></SomeDevOnlyComponent>
      </DevOnly>
    </div>
    <SomeComponent>
      <dev-only>
        test
      </dev-only>
    </SomeComponent>
    </template>`, 'some id')

    expect(normalizeLineEndings(result)).toMatchInlineSnapshot(`
      "<template>
          <div>
            
          </div>
          <SomeComponent>
            
          </SomeComponent>
          <div>
            
          </div>
          <SomeComponent>
            
          </SomeComponent>
          </template>"
    `)

    expect(result).not.toContain('dev-only')
    expect(result).not.toContain('DevOnly')
    expect(result).not.toContain('lazy-dev-only')
    expect(result).not.toContain('LazyDevOnly')
  })

  it('should not remove class -> nuxt#24491', async () => {
    const source = `<template>
    <DevOnly>
      <div class="red">This is red.</div>
      <template #fallback>
        <div class="red">This should also be red.</div>
      </template>
    </DevOnly>
  </template>
  `

    const result = await viteTransform(source, 'some id')

    expect(result).toMatchInlineSnapshot(`
      "<template>
          
              <div class="red">This should also be red.</div>
            
        </template>
        "
    `)
  })
})