yarn create-react-app project-name --template typescript
yarn add @craco/craco- Override config, replace react-scripts with craco except eject
{
// ...
"scripts": {
// "start": "react-scripts start",
// "build": "react-scripts build",
// "test": "react-scripts test",
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
}- Always refer to:https://www.tailwindcss.cn/docs/guides/create-react-app
yarn add tailwindcss@latest postcss@latest autoprefixer@latestyarn add tailwindcss-cli@latest --dev
- Create
craco.config.jsand use tailwindcss as postcss's plugin
module.exports = {
style: {
// why use postcssOptions? -> https://github.com/dilanx/craco/issues/353
postcssOptions: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}- Run
yarn tailwindcss-cli initto init a tailwindcss config. - Add Purge to exclude not used css when compile
// tailwind.config.js
module.exports = {
// purge: [],
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}- Include in
./src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;- Test with
yarn build
yarn add --dev react @typescript-eslint/parser @typescript-eslint/eslint-pluginyarn add --dev prettier eslint-config-prettier eslint-plugin-prettier
module.exports = {
"printWidth": 120,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": false,
"jsxBracketSameLine": true,
"arrowParens": "avoid",
"insertPragma": false,
"tabWidth": 4,
"useTabs": false
};# editorconfig.org
root = true
[*]
end_of_line = lf
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
module.exports = {
// https://eslint.org/docs/latest/use/configure/configuration-files#cascading-and-hierarchy
root: true,
env:{
browser: true,
es2021: true,
},
extends: [
'prettier',
'plugin:prettier/recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:@typescript-eslint/recommended'
],
overrides: [],
parser: '@typescript-eslint/parser',
parserOptions: {
'ecmaVersion': 'latest',
'sourceType': 'module',
'project': ['./tsconfig.json']
},
plugins: [
'react',
'react-hooks',
'@typescript-eslint'
],
rules: {}
}{
// ...
scripts: {
"lint": "eslint src",
"fixlint": "eslint src --fix --ext .ts,.tsx"
}
}yarn add --dev jest ts-jest jest-environment-jsdomjest-environment-jsdomis used whentestEnvironment: 'jsdom'is set in jest.config.js, that is required by the browser environment.
Creat src/__mocks__/styleMock.js to mock css import when use jest
/*
* For a detailed explanation regarding each configuration property, visit:
* https://jestjs.io/docs/configuration
*/
module.exports = {
// All imported modules in your tests should be mocked automatically
// automock: false,
// Stop running tests after `n` failures
bail: true,
// The directory where Jest should store its cached dependency information
// cacheDirectory: "C:\\Users\\mamba\\AppData\\Local\\Temp\\jest",
// Automatically clear mock calls, instances, contexts and results before every test
clearMocks: true,
// Indicates whether the coverage information should be collected while executing the test
collectCoverage: true,
// An array of glob patterns indicating a set of files for which coverage information should be collected
collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'],
// The directory where Jest should output its coverage files
coverageDirectory: "../coverage",
// An array of regexp pattern strings used to skip coverage collection
// coveragePathIgnorePatterns: [
// "\\\\node_modules\\\\"
// ],
// Indicates which provider should be used to instrument code for coverage
// coverageProvider: "babel",
// A list of reporter names that Jest uses when writing coverage reports
// coverageReporters: [
// "json",
// "text",
// "lcov",
// "clover"
// ],
// An object that configures minimum threshold enforcement for coverage results
// coverageThreshold: undefined,
// A path to a custom dependency extractor
// dependencyExtractor: undefined,
// Make calling deprecated APIs throw helpful error messages
// errorOnDeprecated: false,
// The default configuration for fake timers
// fakeTimers: {
// "enableGlobally": false
// },
// Force coverage collection from ignored files using an array of glob patterns
// forceCoverageMatch: [],
// A path to a module which exports an async function that is triggered once before all test suites
// globalSetup: undefined,
// A path to a module which exports an async function that is triggered once after all test suites
// globalTeardown: undefined,
// A set of global variables that need to be available in all test environments
// globals: {},
// The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
// maxWorkers: "50%",
// An array of directory names to be searched recursively up from the requiring module's location
moduleDirectories: [
"node_modules",
"src"
],
// An array of file extensions your modules use
moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
moduleNameMapper: {
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
},
// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
// modulePathIgnorePatterns: [],
// Activates notifications for test results
// notify: false,
// An enum that specifies notification mode. Requires { notify: true }
// notifyMode: "failure-change",
// A preset that is used as a base for Jest's configuration
preset: 'ts-jest',
// Run tests from one or more projects
// projects: undefined,
// Use this configuration option to add custom reporters to Jest
// reporters: undefined,
// Automatically reset mock state before every test
// resetMocks: false,
// Reset the module registry before running each individual test
// resetModules: false,
// A path to a custom resolver
// resolver: undefined,
// Automatically restore mock state and implementation before every test
// restoreMocks: false,
// The root directory that Jest should scan for tests and modules within
rootDir: 'src',
// A list of paths to directories that Jest should use to search for files in
// roots: [
// "<rootDir>"
// ],
// Allows you to use a custom runner instead of Jest's default test runner
// runner: "jest-runner",
// The paths to modules that run some code to configure or set up the testing environment before each test
// setupFiles: [],
// A list of paths to modules that run some code to configure or set up the testing framework before each test
setupFilesAfterEnv: ['@testing-library/jest-dom'],
// The number of seconds after which a test is considered as slow and reported as such in the results.
// slowTestThreshold: 5,
// A list of paths to snapshot serializer modules Jest should use for snapshot testing
// snapshotSerializers: [],
// The test environment that will be used for testing
testEnvironment: "jsdom",
// Options that will be passed to the testEnvironment
// testEnvironmentOptions: {},
// Adds a location field to test results
// testLocationInResults: false,
// The glob patterns Jest uses to detect test files
testMatch: [
"**/__tests__/**/*.[jt]s?(x)",
"**/?(*.)+(spec|test).[tj]s?(x)"
],
// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
// testPathIgnorePatterns: [
// "\\\\node_modules\\\\"
// ],
// The regexp pattern or array of patterns that Jest uses to detect test files
// testRegex: [],
// This option allows the use of a custom results processor
// testResultsProcessor: undefined,
// This option allows use of a custom test runner
// testRunner: "jest-circus/runner",
// A map from regular expressions to paths to transformers
// transform: undefined,
// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
transformIgnorePatterns: [
"/node_modules/",
"\\.svg$",
"\\.(css|less)$"
],
// An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
// unmockedModulePathPatterns: undefined,
// Indicates whether each individual test should be reported during the run
// verbose: undefined,
// An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
// watchPathIgnorePatterns: [],
// Whether to use watchman for file crawling
// watchman: true,
};{
// ...
scripts: {
"test": "jest --bail",
"testa": "jest --watchAll"
}
}Create .github/workflow/ci.yml
name: <PROJECT> CI Process
run-name: ${{ github.actor }} is running CI workflow
on:
pull_request:
branches:
- main
jobs:
lint:
runs-on: ubuntu-latest
steps:
- name: Pull code
uses: actions/checkout@v3
- name: setup nodejs
uses: actions/setup-node@v3
with:
node-version: '16.16.x'
- name: Install yarn
run: npm install -g yarn
- name: Check lint
env:
CI: ""
run: |
yarn install
yarn lint
yarn build
unittest:
runs-on: ubuntu-latest
steps:
- name: Pull code
uses: actions/checkout@v3
- name: setup nodejs
uses: actions/setup-node@v3
with:
node-version: '16.16.x'
- name: Install yarn
run: npm install -g yarn
- name: Run unittest
env:
CI: ""
run: |
yarn install
yarn test