tests() — vite Function Reference

Architecture documentation for the tests() function in tests.ts from the vite codebase.

Function typescript ViteCore ConfigEngine calls 3

Entity Profile

ViteCore→ ConfigEngine→ tests() — vite Function Reference

Dependency Diagram

graph TD
  d2817fdd_4dd1_2a8b_dd89_2038bea82b33["tests()"]
  c8d9e901_9260_5019_70d1_d0573d544a9c["tests.ts"]
  d2817fdd_4dd1_2a8b_dd89_2038bea82b33 -->|defined in| c8d9e901_9260_5019_70d1_d0573d544a9c
  c1f2d498_99c4_6a3b_7efe_b6405c4b5604["sassTest()"]
  d2817fdd_4dd1_2a8b_dd89_2038bea82b33 -->|calls| c1f2d498_99c4_6a3b_7efe_b6405c4b5604
  232f303f_2fa9_44e9_cf63_8e94f647770a["sassModuleTests()"]
  d2817fdd_4dd1_2a8b_dd89_2038bea82b33 -->|calls| 232f303f_2fa9_44e9_cf63_8e94f647770a
  94fd8e4d_ae3b_4b48_f334_30785f310a7b["sassOtherTests()"]
  d2817fdd_4dd1_2a8b_dd89_2038bea82b33 -->|calls| 94fd8e4d_ae3b_4b48_f334_30785f310a7b
  style d2817fdd_4dd1_2a8b_dd89_2038bea82b33 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

playground/css/__tests__/tests.ts lines 17–556

export const tests = (isLightningCSS: boolean) => {
  // note: tests should retrieve the element at the beginning of test and reuse it
  // in later assertions to ensure CSS HMR doesn't reload the page
  test('imported css', async () => {
    const glob = await page.textContent('.imported-css-glob')
    expect(glob).toContain('.dir-import')
    const globEager = await page.textContent('.imported-css-globEager')
    expect(globEager).toContain('.dir-import')
  })

  test('linked css', async () => {
    const linked = await page.$('.linked')
    const atImport = await page.$('.linked-at-import')

    expect(await getColor(linked)).toBe('blue')
    expect(await getColor(atImport)).toBe('red')

    if (isBuild) return

    editFile('linked.css', (code) => code.replace('color: blue', 'color: red'))
    await expect.poll(() => getColor(linked)).toBe('red')

    editFile('linked-at-import.css', (code) =>
      code.replace('color: red', 'color: blue'),
    )
    await expect.poll(() => getColor(atImport)).toBe('blue')
  })

  test('css import from js', async () => {
    const imported = await page.$('.imported')
    const atImport = await page.$('.imported-at-import')

    expect(await getColor(imported)).toBe('green')
    expect(await getColor(atImport)).toBe('purple')

    if (isBuild) return

    editFile('imported.css', (code) =>
      code.replace('color: green', 'color: red'),
    )
    await expect.poll(() => getColor(imported)).toBe('red')

    editFile('imported-at-import.css', (code) =>
      code.replace('color: purple', 'color: blue'),
    )
    await expect.poll(() => getColor(atImport)).toBe('blue')
  })

  test('css import asset with space', async () => {
    const importedWithSpace = await page.$('.import-with-space')

    expect(await getBg(importedWithSpace)).toMatch(/.*\/ok.*\.png/)
  })

  test('postcss config', async () => {
    const imported = await page.$('.postcss .nesting')
    expect(await getColor(imported)).toBe('pink')

    if (isBuild) return

    editFile('imported.css', (code) =>
      code.replace('color: pink', 'color: red'),
    )
    await expect.poll(() => getColor(imported)).toBe('red')
  })

  test('postcss plugin that injects url()', async () => {
    const imported = await page.$('.inject-url')
    // alias should be resolved
    expect(await getBg(imported)).toMatch(
      /localhost(?::\d+)?\/(?:assets\/)?ok.*\.png/,
    )
  })

  sassTest()

  test('less', async () => {
    const imported = await page.$('.less')
    const atImport = await page.$('.less-at-import')
    const atImportAlias = await page.$('.less-at-import-alias')
    const atImportUrlOmmer = await page.$('.less-at-import-url-ommer')