Typescript, Vite 및 Vitest를 사용하여 최신 Preact 애플리케이션 설정

Wiring up a TypeScript environment with Preact, Vite and Vitest and vitest-dom

나는 Vite와 Vitest에 대해 좋은 소식을 들었습니다. 테스트 드라이브를 제공했을 때 전체 제품군을 실행하는 데 약간의 성가심이 생겼습니다.

내가 취한 단계를 기록하고 있습니다. 아마 도움이 될 것입니다.

이 기사는 기본적으로 내 필요에 맞게 조정된 a blog post by Tomoki Miyaci의 재작성입니다.

압형:

타입스크립트

비테

Vitest (와 vitest-dom)

프리액트

이뻐요

ESLint

허스키&린트스테이지드

커밋린트

내 모든 명령은 pnpm을 사용합니다. 자유롭게 npm 또는 yarn으로 교체하십시오.

초대

pnpm create vite <project-name> --template preact-ts
cd <project-name>
pnpm install

ESLint 더 예뻐요

pnpm i -D eslint eslint-config-prettier \
 prettier \
 @typescript-eslint/parser

다음 내용으로 .eslintrc라는 새 파일을 만듭니다.

{
 "env": {
 "browser": true,
 "es2021": true
 },
 "extends": ["eslint:recommended", "preact", "prettier"],
 "parser": "@typescript-eslint/parser",
 "parserOptions": {
 "ecmaFeatures": {
 "jsx": true
 },
 "ecmaVersion": "latest",
 "sourceType": "module"
 },
 "settings": {
 "jest": {
 "version": 27
 }
 },
 "ignorePatterns": ["*.d.ts"],
 "rules": {}
}

한 가지 주름은 Jest 설정 옵션이었습니다. Vite를 사용하고 싶었지만 eslint는 일부 테스트를 위해 Jest 버전을 알아야 합니다.

더 예쁜 구성(.prettierrc), 필요에 맞게 조정:

{
 "trailingComma": "es5",
 "semi": false,
 "singleQuote": true
}

조정하자package.json:

{
 "scripts": {
 "lint:fix": "eslint --fix --ext .ts,tsx --ignore-path .gitignore .",
 "prettier:write": "prettier -u -w --ignore-path .gitignore \"*.{ts,tsx,css,html}\"",
}

허스키하고 린트 스테이징

lint-staged 내부package.json 구성:

{
 "lint-staged": {
 "*.{ts,tsx}": ["pnpm run lint:fix", "pnpm run prettier:write"],
 "*.{html,css,js,json}": "pnpm run prettier:write"
 }
}

TypeScript 파일에서 ESLint와 prettier를 순차적으로 실행합니다. 다른 파일의 경우 더 예뻐도 충분합니다.

이제 husky이 필요합니다.

스크립트로 초기화합니다.

pnpm dlx husky-init && pnpm install

위의 명령은 도구를 설정하고 필요한 파일과 후크를 생성합니다.

기본 후크는 파일을 스테이징 영역에 커밋하기 전에 실행됩니다..husky/pre-commit에서 찾을 수 있습니다.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

pnpm exec lint-staged
## if you want to run your tests before commiting,
## uncomment next line
# pnpm exec vitest run

커밋린트

commitlint checks if your commit messages meet the conventional commit format.

예시:

chore: run tests on travis ci

저는 개인적으로 균일한 커밋 스타일을 적용하는 것이 매우 유용하다고 생각합니다.
commitlint 허스키와 잘 어울립니다.

pnpm add -D @commitlint/{config-conventional,cli}

구성 파일( .commitlintrc.json )을 추가해 보겠습니다.

{
 "extends": ["@commitlint/config-conventional"]
}

이제 허스키를 위한 갈고리가 필요합니다. 터미널에서 다음 명령을 실행합니다.

pnpm dlx husky add \
 .husky/commit-msg 'pnpm exec commitlint --edit'

Vitest

설치:

pnpm add -D vitest vitest-dom happy-dom

vitest-dom 은 .toBeDisabled 와 같은 편리한 방법으로 표준 Jest 매처를 확장합니다.
이제 DOM 상태를 어설션하는 테스트를 작성할 수 있습니다.
패키지는 @testing-library/jest-dom의 포크입니다.
.vite.config.ts로 vitest 구성:

/// <reference types="vitest" />
import { fileURLToPath } from 'url'
import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'

// https://vitejs.dev/config/
export default defineConfig({
 define: {
 'import.meta.vitest': 'undefined',
 },
 plugins: [preact()],
 test: {
 environment: 'happy-dom',
 setupFiles: ['./ __test__ /test-setup.ts'],
 includeSource: ['src/**/*.{ts,tsx}'],
 coverage: {
 reporter: ['text-summary', 'text'],
 },
 mockReset: true,
 restoreMocks: true,
 },
})

코드 섹션import.meta.vitest을 사용하면 run tests within your source code .

테스트 설정을 위해 __test__라는 파일이 있는 별도의 test-setup.ts 폴더를 만들었습니다.

import 'vitest-dom/extend-expect'
import * as domMatchers from 'vitest-dom/matchers'
import { expect } from 'vitest'

expect.extend(domMatchers)

여기에 vitest-dom 추가 매처를 추가합니다. 필요한 경우 더 많은 설정 논리를 추가할 수 있습니다.

출처

Building a Typescript Environment for Preact with Vite

Diving Into Husky and lint-staged