tests/__tests__/css-modules.spec.ts - main - githubmirror/taro

tests/__tests__/css-modules.spec.ts
93 строки2 KB
liuzejia
refactor: 抽离webpack5-runner 测试到 tests
27 май 2024, 11:43
27 май 2024, 11:435b9772f
import { compile, getOutput } from './utils/compiler'

describe('css modules', () => {
  describe('should use css modules with module mode', () => {
    test('web', async () => {
      const { stats, config } = await compile('css-modules', {
        platformType: 'web',
        framework: 'react',
        postcss: {
          cssModules: {
            enable: true,
            config: {
              namingPattern: 'module',
              generateScopedName: '[name]__[local]___[hash:base64:5]'
            }
          }
        }
      })
      const assets = stats?.toJson().assets || []

      expect(assets.length).toMatchSnapshot()

      const output = getOutput(stats, config)
      expect(output).toMatchSnapshot()
    })

    test('mini', async () => {
      const { stats, config } = await compile('css-modules', {
        platformType: 'mini',
        postcss: {
          cssModules: {
            enable: true,
            config: {
              namingPattern: 'module',
              generateScopedName: '[name]__[local]___[hash:base64:5]'
            }
          }
        }
      })
      const assets = stats.toJson().assets || []

      expect(assets.length).toMatchSnapshot()

      const output = getOutput(stats, config)
      expect(output).toMatchSnapshot()
    })
  })

  describe('should use css modules with global mode', () => {
    test('web', async () => {
      const { stats, config } = await compile('css-modules', {
        platformType: 'web',
        framework: 'react',
        postcss: {
          cssModules: {
            enable: true,
            config: {
              namingPattern: 'global',
              generateScopedName: '[name]__[local]___[hash:base64:5]'
            }
          }
        }
      })
      const assets = stats?.toJson().assets || []

      expect(assets.length).toMatchSnapshot()

      const output = getOutput(stats, config)
      expect(output).toMatchSnapshot()
    })

    test('mini', async () => {
      const { stats, config } = await compile('css-modules', {
        platformType: 'mini',
        postcss: {
          cssModules: {
            enable: true,
            config: {
              namingPattern: 'global',
              generateScopedName: '[name]__[local]___[hash:base64:5]'
            }
          }
        }
      })
      const assets = stats.toJson().assets || []

      expect(assets.length).toMatchSnapshot()

      const output = getOutput(stats, config)
      expect(output).toMatchSnapshot()
    })
  })
})