ViteReact

App.test.tsx

import { describe, expect, it } from 'vitest'
import App from './App'
import { render, screen, userEvent } from './utils/test-utils'

describe('Simple working test', () => {
  it('the title is visible', () => {
    render(<App />)
    expect(screen.getByText(/Hello Vite \+ React!/i)).toBeInTheDocument()
  })

  it('should increment count on click', async () => {
    render(<App />)
    userEvent.click(screen.getByRole('button'))
    expect(await screen.findByText(/count is: 1/i)).toBeInTheDocument()
  })
})

button.stories.tsx

import React from "react"

import {
  ComponentStory,
  ComponentMeta
} from "@storybook/react"
import { BADGE } from "@geometricpanda/storybook-addon-badges"

import {
  within,
  userEvent,
  waitFor
} from "@storybook/testing-library"
import { expect } from "@storybook/jest"

import Button, { defStyles } from "./button"

export default {
  title: "Elements/Buttons",
  component: Button,
  argTypes: {
    children: { control: "text" },
    type: {
      control: "select",
      options: ["button", "submit", "reset"]
    },
    disabled: { control: "boolean", defaultValue: null },
    defaultStyles: {
      control: "boolean",
      defaultValue: true
    },
    onPointerDown: { action: 'down' },
    onPointerLeave: { action: 'leave' },
    onPointerOver: { action: 'over' }
  },
  parameters: {
    badges: [BADGE.BETA]
  }
} as ComponentMeta<typeof Button>

const Template: ComponentStory<typeof Button> = (args) => (
  <Button {...args}>{args.children}</Button>
)

export const DefaultButton = Template.bind({})
DefaultButton.args = {
  children: "Default Button",
}

ButtonInteractions.args = {
  children: "Button Test",
  type: "button",
  onPointerDown: () => {
    clicked = true
  }
}

ButtonInteractions.play = async ({ args, canvasElement }) => {
  const { getByRole } = within(canvasElement)
  const button = getByRole("button")
  expect(button).toHaveAccessibleName("Button Test")
  expect(button).toHaveAttribute("type", "button")
  expect(button).toHaveAttribute("style")
  expect(clicked).toBeFalsy()
  clicked = false
  userEvent.click(button)
  await waitFor(() => expect(clicked).toBeTruthy())
}

index.ts

export { default as Link } from './Link';

input.test.tsx

import '@testing-library/jest-dom'
import { render, screen, userEvent } from '../utils/test-utils'
import { Input } from './Input'

describe('Input', async () => {
  it('should render the input', () => {
    render(
      <Input
        name="email"
        type="email"
        error={undefined}
        placeholder="Email"
        label="Email Address"
        aria-label="Email Address"
      />,
    )
    expect(screen.getByText('Email Address')).toBeInTheDocument()
    expect(screen.getByRole('textbox', {
      name: /email address/i,
    })).toBeInTheDocument()
  })
  it('should change input value', () => {
    render(
      <Input
        name="email"
        type="email"
        error={undefined}
        placeholder="Email"
        label="Email Address"
        aria-label="Email Address"
      />,
    )

    screen.logTestingPlaygroundURL()

    const input = screen.getByRole('textbox', {
      name: /email address/i,
    })
    expect(input).toBeInTheDocument()
    userEvent.type(input, '1337')
    expect(input).toHaveValue('1337')
  })
  it('should render the input with error', () => {
    render(
      <Input
        name="email"
        type="email"
        placeholder="Email"
        label="Email Address"
        aria-label="Email Address"
        error="Please enter your email"
      />,
    )
    expect(screen.getByRole('textbox', {
      name: /email address/i,
    })).toBeInTheDocument()
    expect(screen.getByRole('alert')).toHaveTextContent('Please enter your email')
  })
})

link.test.tsx

import React from 'react';

import { describe, expect, test, it  } from 'vitest';
import { render, screen  } from '@testing-library/react';
import Link from"./Link"

describe("<Link>", () => {
  test("component renders as expected to", () => {
    const container = render(<Link />)
    expect(screen.getByText('Default Link')).toBeDefined()
    screen.debug()
    expect(container).toMatchSnapshot()
  })

  it("should accept props", () => {

    const link = "https://google.com/"
    const label = "Search on Google"

    const linkContainer = render(<Link page={link}>{label}</Link>)
    const linkElement = screen.getByRole('link');
    screen.debug(linkElement)
    expect(screen.getByText(label)).toBeDefined()

  })
})

navigation.test.jsx

import React from "react";

import { render, screen } from "@testing-library/react";
import { axe } from "vitest-axe";
import { expect, describe, test } from "vitest";

import { dataSet } from "../mocks/navigation.mocks";

// 👉 import your component here
import Navigation from "./navigation";

describe("Navigation", () => {
  test("renders the navigation", () => {
    render(<Navigation data={dataSet} />);

    expect(screen.getByRole("navigation")).toBeDefined();
  });

  test("is accessible", async () => {
    const { container } = render(<Navigation data={dataSet} />);

    expect(await axe(container)).toHaveNoViolations();
  });
});

package-scripts-dev-deps

  "scripts": {
    "start": "vite --open",
    "dev": "vite",
    "build": "tsc && vite build",
    "package": "tsc && vite build --mode package",
    "preview": "vite preview",
    "test": "vitest",
    "test:ui": "vitest --ui",
    "test:coverage": "vitest --coverage"
  },
  "devDependencies": {
    "@ladle/react": "^1.1.1",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@types/react-test-renderer": "^18.0.0",
    "@vitejs/plugin-react": "^1.3.0",
    "@vitest/ui": "^0.15.1",
    "c8": "^7.11.3",
    "happy-dom": "^5.3.1",
    "jsdom": "^19.0.0",
    "react-test-renderer": "^18.2.0",
    "typescript": "^4.6.3",
    "vite": "^2.9.9",
    "vitest": "^0.15.1"
  }
}

package.json

{
  "name": "@fpkit/fp",
  "private": false,
  "version": "0.0.5",
  "scripts": {
    "start": "vite --open",
    "dev": "vite",
    "build": "tsc && vite build",
    "build:package": "tsc && vite build --mode package --config vite.package.config.ts",
    "package": "tsup --dts",
    "preview": "vite preview",
    "test": "vitest",
    "test:ui": "vitest --coverage --ui",
    "test:coverage": "vitest --coverage",
    "test:ui:coverage": "vitest --coverage --ui",
    "test:snapshot": "vitest --run --update"
  },
  "dependencies": {
    "@fpkit/fp-button": "^0.4.10",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "vite-plugin-dts": "^1.2.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^14.2.1",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@types/react-test-renderer": "^18.0.0",
    "@vitejs/plugin-react": "^1.3.0",
    "@vitest/ui": "^0.15.1",
    "c8": "^7.11.3",
    "happy-dom": "^5.3.1",
    "jsdom": "^19.0.0",
    "parcel": "^2.6.2",
    "react-test-renderer": "^18.2.0",
    "tsup": "^6.2.3",
    "typescript": "^4.6.3",
    "vite": "^2.9.9",
    "vitest": "^0.15.1"
  },
  "description": "Introduction",
  "type": "module",
  "source": "src/index.ts",
  "main": "./dist/index.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "files": [
    "lib",
    "src",
    "dist"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/shawn-sandy/react-vite.git"
  },
  "author": "",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/shawn-sandy/react-vite/issues"
  },
  "homepage": "https://github.com/shawn-sandy/react-vite#readme",
  "keywords": [
    "React",
    "components"
  ],
  "publishConfig": {
    "access": "public"
  },
  "gitHead": "4718563e4154f87525194c4428bc6d34cf7cabec"
}

reac-vite.text.tsx

import React from "react";

import { describe, expect, test } from "vitest";
import { render, screen } from "@testing-library/react";
import { axe } from "vitest-axe";

// 👉 import ComponentName from "./component-name";

import Nav from "./nav";
describe("App renders correctly", () => {
  test("renders without crashing", async () => {
    // 👉 render(<ComponentName>Link</ComponentName>);
    // render(<Nav>Link</Nav>);
    // const nav = screen.getByRole("navigation");
    // expect(nav).toBeDefined();
    // expect(await axe(nav)).toHaveNoViolations();
    // screen.debug();
    // expect(nav).toMatchSnapshot();
  });
});

setup.ts

import '@testing-library/jest-dom'
import "jest-axe/extend-expect";

import matchers from '@testing-library/jest-dom/matchers';
import { expect } from 'vitest';

expect.extend(matchers);

test-utils.tsx

/* eslint-disable import/export */
import { cleanup, render } from '@testing-library/react'
import { afterEach } from 'vitest'

afterEach(() => {
  cleanup()
})

const customRender = (ui: React.ReactElement, options = {}) =>
  render(ui, {
    // wrap provider(s) here if needed
    wrapper: ({ children }) => children,
    ...options,
  })

export * from '@testing-library/react'
export { default as userEvent } from '@testing-library/user-event'
// override render export
export { customRender as render }

tsup.config.cjs

import { defineConfig } from 'tsup'

export default defineConfig({
  entry: ['src/index.ts'],
  splitting: false,
  sourcemap: true,
  clean: true,
  format: ['esm', 'cjs', 'iife'],
  minify: true
})
// "package": "tsup --dts",

useCounter.test.ts

import { act, renderHook } from '@testing-library/react-hooks'
import { useCounter } from './useCounter'

describe('useCounter', () => {
  it('should increment counter', () => {
    const { result } = renderHook(() => useCounter())
    act(() => {
      result.current.increment()
    })
    expect(result.current.count).toBe(1)
  })
})

vite.config.ts

/// <reference types="vitest" />
/// <reference types="vite/client" />

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import { resolve } from 'node:path'
import dts from "node:path"

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  // plugins: [react()],

  if (mode !== 'package') {
    return {
      plugins: [react()],
      test: {
        globals: true,
        environment: 'jsdom',
        setupFiles: './src/test/setup.ts'
      }
    }
  } else {
    return {
      plugins: [react(), dts()],
      test: {
        globals: true,
        environment: 'jsdom',
        setupFiles: './src/test/setup.ts'
      },
      esbuild: {
        logOverride: { 'this-is-undefined-in-esm': 'silent' }
      },
      build: {
        outDir: resolve(__dirname, '../lib'),
        sourcemap: true,
        lib: {
          entry: resolve(__dirname, 'src/component/index.ts'),
          name: 'Link',
          formats: ['es', 'umd'],
          fileName: (format) => `index.${format}.js`,
        },
        rollupOptions: {
          external: ['react', 'react-dom', 'styled-components'],
          output: {
            globals: {
              react: 'React',
              'react-dom': 'ReactDOM',
            },
          },
        },
      },
    }
  }

})

vite.package.config.ts

/** @format */

import { defineConfig, splitVendorChunkPlugin } from "vite"
import react from "@vitejs/plugin-react"
import dts from "vite-plugin-dts"
import { resolve } from "node:path"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), dts(
    {insertTypesEntry: true,}
  ), splitVendorChunkPlugin()],
  esbuild: {
    logOverride: { "this-is-undefined-in-esm": "silent" }
  },
  build: {
    outDir: resolve(__dirname, "./lib"),
    sourcemap: true,
    manifest: true,
    reportCompressedSize: true,
    minify: true,
    lib: {
      entry: resolve(__dirname, "src/index.ts"),
      name: "Link",
      fileName: "index"
    },
    rollupOptions: {
      external: ["react", "react-dom"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM"
        }

      }
    }
  }
})

vitest.config.js

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

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    coverage: {
      reporter: ['text', 'html'],
      exclude: [
        'node_modules/',
        'src/setupTests.ts',
      ],
    },
  },
});

vitest.config.ts

/// <reference types="vitest" />
/// <reference types="vite/client" />

import react from "@vitejs/plugin-react"
import { defineConfig } from "vitest/config"

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom", // add jsdom
    setupFiles: "./src/test/setup.ts", // setup includes
    coverage: {
      // config coverage
      reporter: ["text", "html"], // generate coverage reports
      exclude: ["node_modules/", "src/test/setup.ts"]
    }
  }
})
// package setup
// vitest jsdom c8
// @testing-library/jest-dom @testing-library/react @testing-library/user-event @types/react-test-renderer react-test-renderer