세팅 등 파일의 자세한 내용들은 업로드된 파일들 참고.
- TypeScript
- ESLint
- React
- Parcel
- React Router
- styled-components
- styled-reset
- usehooks-ts
- usestore-ts
- jest-dom
- CodeceptJS
npm init -ynpm i -D typescript타입스크립트 설정 파일 tsconfig.json 생성
npx tsc --inittsconfig.json 파일에서 jsx 관련 항목 주석제거하고 수정
{
"jsx": "react-jsx"
}npm i -D eslintnpx eslint --init
$ > To check syntax, find problems, and enforce code style
$ > JavaScript modules (import/export)
$ > React
$ > Yes(TypeScript)
$ > Browser
$ > Use a popular style guide
$ > XO타입스크립트의 경우 ESLint 에서 에어비엔비 스타일을 지원하지 않아 XO 스타일을 제거하고 에어비엔비 스타일로 변경
npm uninstall eslint-config-xo \
eslint-config-xo-typescript
npm i -D eslint-config-airbnb \
eslint-plugin-import \
eslint-plugin-react \
eslint-plugin-react-hooks \
eslint-plugin-jsx-a11y.eslintrc.js 파일 수정
module.exports = {
env: {
browser: true,
es2021: true,
jest: true,
},
extends: [
'airbnb',
'plugin:@typescript-eslint/recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: ['react', 'react-hooks', '@typescript-eslint'],
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
},
},
rules: {
indent: ['error', 2],
'no-trailing-spaces': 'error',
curly: 'error',
'brace-style': 'error',
'no-multi-spaces': 'error',
'space-infix-ops': 'error',
'space-unary-ops': 'error',
'no-whitespace-before-property': 'error',
'func-call-spacing': 'error',
'space-before-blocks': 'error',
'keyword-spacing': ['error', { before: true, after: true }],
'comma-spacing': ['error', { before: false, after: true }],
'comma-style': ['error', 'last'],
'comma-dangle': ['error', 'always-multiline'],
'space-in-parens': ['error', 'never'],
'block-spacing': 'error',
'array-bracket-spacing': ['error', 'never'],
'object-curly-spacing': ['error', 'always'],
'key-spacing': ['error', { mode: 'strict' }],
'arrow-spacing': ['error', { before: true, after: true }],
'import/no-extraneous-dependencies': [
'error',
{
devDependencies: [
'**/*.test.js',
'**/*.test.jsx',
'**/*.test.ts',
'**/*.test.tsx',
],
},
],
'import/extensions': [
'error',
'ignorePackages',
{
js: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never',
},
],
'react/jsx-filename-extension': [
2,
{
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
],
'jsx-a11y/label-has-associated-control': ['error', { assert: 'either' }],
},
};.eslintignore 파일 생성
npm i -D jest @types/jest @swc/core @swc/jestjest.config.js 생성
npm i react react-dom
npm i -D @types/react @types/react-domindex.html, src/main.tsx, src/App.tsx 파일 생성
npm i -D parcelnpm i -D @testing-library/react @testing-library/jest-dom jest-environment-jsdomjest.config.js 에 관련 설정 추가
src/App.test.tsx 파일 생성
npm i -D mswsrc/setupTests.ts, src/mocks/server.ts, src/mocks/handler.ts 파일 추가
jest.config.js 에 setupFilesAfterEnv 의 속성에 setupTests.ts 파일 추가
npm install react-router-domReact Router 6.4버전부터 라우터 객체를 지원함.
routes.tsx 파일 생성
App.tsx 파일 참조
npm i [email protected]
npm i -D @types/styled-components @swc/plugin-styled-components
npm i styled-reset.swcrc 파일 생성
styles 폴더 참조
테스트할 때 Theme 을 이용하면 render 할 때 문제가 발생하기 때문에 별도로 테스트용 헬퍼 함수 생성
npm i axiosnpm i tsyringe reflect-metadata usestore-tssrc/main.tsx 와 src/setupTests.ts 에 reflect-metadata import 해주기
tsconfig.json 에 experimentalDecorators 와 emitDecoratorMetadata 속성 true 로
변경
jest.config.js 세팅 수정
npx codeceptjs init
# > Where are your tests located? ./tests/**/*_test.js
# > What helpers do you want to use? Playwright
# > where should logs, screenshots, and reports to be stored? (./output)
# > Do you want localization for tests? English (no localization)
# > [Playwright] Base url of site to be tested (http://localhost)
# > [Playwright] Show browser window n
# > [Playwright] Browser in which testing will be performed. Possible options: chromium, firefox or webkit (chromium)
# > Feature which is being tested (ex: account, login, etc)
# > Filename of a test (_test.js)2023년 5월 기준 CodeceptJS 문제로 에러가 발생할 수 있음. 그래서 부가적인 세팅이 필요함.
-
의존성 설치
npm i -D eslint-plugin-codeceptjs playwright @codeceptjs/configure -
codecept.conf.ts에서config의 타입 제거 및 수정. -
tests/steps.d.ts파일 생성 -
steps_files.js파일tests폴더로 이동 -
CodeceptJS가 내부적으로
ts-node를 쓰기 때문에tsconfig.json파일에ts-node설정을 추가 -
/tests/.eslintrc.js파일 생성 -
.gitignore에output/추가
package.json 파일 참조
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent