feat: add unit test project and update Vitest best practices (#11)

* feat: add unit test project and update Vitest best practices

- Add dual project setup: unit tests (jsdom) and storybook tests (browser)
- Create src/utils.ts with formatGreeting utility as example
- Create test/utils.test.ts demonstrating unit test patterns
- Add jsdom to devDependencies for unit test environment
- Update @Neovici/testing from ^2.0.0 to ^2.2.0 (adds renderHook, waitUntil)
- Update package.json scripts: test, test:unit, test:storybook, test:watch
- Update README with testing documentation and best practices
- Document important warning: never import from 'vitest' in story files

NEO-934

* fix: formatting of cosmoz-component usage example

* docs: remove renderHook mention from unit tests

renderHook from @Neovici/testing has ESM resolution issues in jsdom
and multiple Lit version conflicts in browser mode. Hooks should be
tested via Storybook interaction tests instead.

* chore: update @Neovici/testing to ^2.3.0 for ESM compatibility

* docs: add note about jsdom limitations for Pion/Lit imports

Unit tests in jsdom cannot use renderHook or import Pion/Lit components
due to ESM resolution issues in @pionjs/pion. Document this limitation
and recommend using Storybook interaction tests for hooks and components.

* fix: split usage example into separate JS and HTML code blocks

Author: cristinecula

docs/README.md

@@ -12,7 +12,9 @@ npm install
 
 - `npm run lint` - Run ESLint and TypeScript type checking
 - `npm run build` - Build TypeScript to dist/
-- `npm run test` - Run tests with coverage
+- `npm run test` - Run all tests (unit + storybook)
+- `npm run test:unit` - Run unit tests only (fast, jsdom)
+- `npm run test:storybook` - Run storybook interaction tests only (browser)
 - `npm run test:watch` - Run tests in watch mode
 - `npm run storybook:start` - Start Storybook development server
 - `npm run storybook:build` - Build static Storybook
@@ -23,8 +25,11 @@ Import the component:
 
 ```javascript
 import '@neovici/cosmoz-component';
+```
+
+Use in HTML:
 
-// Use in HTML
+```html
 <cosmoz-component greeting="Hi"></cosmoz-component>
 ```
 
@@ -35,6 +40,58 @@ import '@neovici/cosmoz-component';
 3. Start development with `npm run storybook:start`
 4. Make changes and verify with tests
 
+## Testing
+
+This template uses Vitest with two test projects:
+
+### Unit Tests (`test:unit`)
+
+Fast tests that run in jsdom. Use for testing:
+
+- Utility functions
+- Pure logic
+- Data transformations
+
+**Note**: Unit tests cannot import Pion/Lit components or use `renderHook` from `@neovici/testing` due to ESM resolution issues in jsdom. For testing hooks and components, use Storybook interaction tests instead.
+
+```typescript
+// test/example.test.ts
+import { describe, expect, it } from 'vitest';
+import { myFunction } from '../src/utils';
+
+describe('myFunction', () => {
+	it('does something', () => {
+		expect(myFunction()).toBe(expected);
+	});
+});
+```
+
+### Storybook Tests (`test:storybook`)
+
+Browser-based tests using Playwright. Use for testing:
+
+- Component rendering
+- User interactions
+- Visual behavior
+
+Tests are written as `play` functions in story files.
+
+### Important: Imports in Story Files
+
+**Never import from `'vitest'` in story files:**
+
+```typescript
+import { expect } from 'vitest'; // Crashes deployed Storybook
+```
+
+**Use `'storybook/test'` instead:**
+
+```typescript
+import { expect } from 'storybook/test'; // Works everywhere
+```
+
+Vitest's `expect` requires an active test context and crashes when stories run in the deployed Storybook UI.
+
 ## Publishing
 
 This package uses Semantic Release for automated versioning and publishing. Commits are analyzed and releases are created automatically based on Conventional Commits.