Starters

README.md

Documented starters/setups guides for building frontend applications

vitest-setup.ts

/**
 * This file is used to setup the environment for the vitest.
 * Vite website https://vitejs.dev
 * More information about the vitest can be found at
 * https://vitest.dev
 * 
 */

/**
vitest @types/vitest jsdom c8
@testing-library/jest-dom @testing-library/react @testing-library/user-event @types/react-test-renderer react-test-renderer vitest-axe
 */


/**
 * This is the configuration file for the vitest.
 * create a file with the name vitest.config.ts in the root directory of your project.
 * copy the following code in the file.
 */

/// <reference types="vitest" />
import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'
export default defineConfig({
    test: {
        globals: true,
        environment: 'jsdom',
        setupFiles: 'src/test/setup.ts',
        coverage: {
            reporter: ['text', 'html'],
            exclude: ['node_modules/', 'src/setupTests.ts'],
        },
    },
})

/**
 * Add the following to you vite.config.ts file.
 * 
 */

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    // Add the following to your vite.config.ts file.
    test: {
        globals: true,
        environment: "jsdom", // add jsdom
        setupFiles: "./src/test/setup.ts",
    },
    // end **************************************************************

})


/**
 * create a setup.ts file in the src/test directory.
 * paste the following code in the file.
 */
import { expect, afterEach } from "vitest";
import { cleanup } from "@testing-library/react";
import * as matchers from "vitest-axe/matchers";
import "vitest-axe/extend-expect";

// extends Vitest's expect method with methods from react-testing-library
expect.extend(matchers);

// runs a cleanup after each test case (e.g. clearing jsdom)
afterEach(() => {
    cleanup();
});


/**
 * Add the following to your package.json file.

{
"scripts": {
"test": "vitest",
"test:watch": "vitest --watch",
"test:coverage": "vitest --coverage",
"test:ci": "vitest --ci"
}
} 

*/



/**
 * Simple test example
 */
import { expect, it } from 'vitest'

it('renders correctly', () => {
    const result = render()
    expect(result).toMatchSnapshot()
})

/**
 * Test example with react-testing-library
 */
import { describe, expect, test } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import Popover from './popover'
describe('Popover', () => {
    it('should show popover on button click', async () => {
        // eslint-disable-next-line react/react-in-jsx-scope
        const component = render(<Popover />)
    const button = screen.getByText('Click me')
        fireEvent.mouseOver(button)
        expect(screen.getByText('This is a popover.')).toBeDefined()
        expect(component).toMatchSnapshot()
    })
})