API: https://rickandmortyapi.com/documentation/
$> npm create vite@latest clean-arch-workshop-ts -- --template react-ts
$> cd clean-arch-workshop-ts
$> npm install
Install dependencies
$> npm install -D vitest
$> npm install -D @vitest/coverage-v8
Update package.json scripts:
...
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"test": "vitest"
},
...
Adding support to browser
$> npm install -D jsdom
Create config vite.config.ts
import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
test: {
environment: "jsdom",
},
});
Create a dumb test to prove test configuration:
//test/first.spec.ts
import { describe, expect, it } from "vitest";
describe("First test", () => {
it("should works", () => {
expect(true).toBe(true);
});
});
Run tests
$> npm run test
$> npm install --save axios
- Show pagination characters with persistent state.