VITest - sgml/signature GitHub Wiki

Install

npm install --save-dev vitest @vitest/ui @vitejs/plugin-vue

Debug Mode and Breakpoint Troubleshooting

Use vite --debug

Use npx vitest --reporter=verbose for verbose reporting

Use npx vitest --inspect-brk for breakpoint debugging

Command Line

Use the following command to run vitest: npx vitest --config $VITEST_CONFIG ./tests/env-check.test.js

Config File

Use the following as a baseline config file for Vue:

import { defineConfig } from 'vitest/config';
import vue from '@vitejs/plugin-vue2'

export default defineConfig({
  plugins: [vue()],
  test: {
    globals: true,
    environment: 'node', // or 'node' based on your needs
    setupFiles: '/home/think/setupTests.ts', // adjust this if you have a setup file
    include: ['**/*.test.ts', '**/*.spec.js'],
  },
});

OR for Vue3:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { configDefaults } from 'vitest/config'

export default defineConfig({
  plugins: [vue()],
  test: {
    // vitest options
    globals: true,
    environment: 'jsdom',
    ...configDefaults,
  },
})

Renderer Decoupling

steps:
  - step: Install necessary packages
    command: npm install vue vue-template-compiler vue-server-renderer

  - step: Create a Vue component
    filename: MyComponent.vue
    content: |
      <template>
        <div>Hello, World!</div>
      </template>

      <script>
      export default {
        name: 'MyComponent'
      };
      </script>

  - step: Create a script to render the component
    filename: render-component.js
    content: |
      const Vue = require('vue');
      const renderer = require('vue-server-renderer').createRenderer();
      const fs = require('fs');
      const path = require('path');
      const { compileTemplate } = require('@vue/component-compiler-utils');
      const compiler = require('vue-template-compiler');

      // Read the Vue component file
      const componentPath = path.resolve(__dirname, 'MyComponent.vue');
      const componentContent = fs.readFileSync(componentPath, 'utf-8');

      // Parse and compile the template
      const output = compileTemplate({
        source: componentContent,
        compiler,
        filename: 'MyComponent.vue',
        isProduction: false,
      });

      // Create a new Vue instance with the compiled render function
      const app = new Vue({
        render: new Function(output.code)(),
      });

      // Render the Vue instance to HTML
      renderer.renderToString(app, (err, html) => {
        if (err) {
          console.error(err);
          return;
        }
        console.log(html);
      });

  - step: Run the script
    command: node render-component.js

Boilerplate Sanity Test

Use the following tests to check parsers:

Vue

import { expect, test } from 'vitest'
import { mount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'

test('Vue2 parser works', async () => {
  const wrapper = mount(MyComponent)
  const h1 = wrapper.find('h1')
  expect(h1.text()).toBe('Hello, Vue2!')
})