Vitest

If you used the CLI method to install Minze you can extend your environment with unit tests quite quickly by using Vitest.

The following guide is based on a fresh Minze CLI installation.

1. Install dependencies.

npm

$ npm add -D vitest @vitest/ui happy-dom

yarn

$ yarn add -D vitest @vitest/ui happy-dom

pnpm

$ pnpm add -D vitest @vitest/ui happy-dom

bun

$ bun add -D vitest @vitest/ui happy-dom

2. Add test scripts to package.json.

package.json

{
  "scripts": {
    // ...
    "test": "vitest",
    "test-ui": "vitest --ui"
  }
}

3. Set the Vitest environment to happy-dom inside the vite config file.

vite.config.js

import { defineConfig } from 'vite'
import minze from 'vite-plugin-minze'

export default defineConfig({
  resolve: {
    alias: { '@': new URL('./src', import.meta.url).pathname }
  },
  test: {
    environment: 'happy-dom'
  },
  plugins: [minze()]
})

4. Create a my-button.test.js file inside the src/lib directory.

src/
└─ lib/
   ├─ ...
   ├─ my-button.js
   └─ my-button.test.js

5. Add the following code to your newly created file:

src/lib/my-button.test.js

import { test, expect } from 'vitest'
import { MyButton } from './my-button'

test('my-button', () => {
  expect(MyButton.name).toBe('MyButton')
  // ...
})

6. Run the test script.

npm

$ npm test

yarn

$ yarn test

pnpm

$ pnpm test

bun

$ bun test

TIP

For more details about Vitest refer to the Vitest docs.