Create React App(TypeScript) + SWC + MUI v5 の環境構築

$ node -v
14.17.0

$ npm -v
8.5.2

$ yarn -v
1.22.10

$ yarn create react-app project-name --template typescript

インストール実行
Happy hacking!
✨  Done in xx.xxs.

$ cd project-name && yarn start

$ npx eslint --init

? How would you like to use ESLint? …
❯ To check syntax and find problems

? What type of modules does your project use? …
❯ JavaScript modules (import/export)

? Which framework does your project use? …
❯ React

? Does your project use TypeScript?
Yes

? Where does your code run? …
✔ Browser
✔ Node

? What format do you want your config file to be in? …
❯ JavaScript # ここはお好みでいいと思います

? Would you like to install them now with npm?
Yes

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

$ yarn add -D prettier eslint-config-prettier

$ touch prettier.config.js

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  singleQuote: true,
  trailingComma: 'none',
  semi: false,
  parser: 'typescript'
}

module.exports = {
	...
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'  // <追記
  ],
	...
};

$ yarn add -D eslint-import-resolver-typescript eslint-plugin-react-hooks

module.exports = {
  ...
  // settingsに追記
  settings: {
    'import/resolver': {
      typescript: {
        project: './tsconfig.json'
      }
    }
  },
  plugins: [
    'react',
    '@typescript-eslint',
    'react-hooks' // 追記
  ],
  ...
};

module.exports = {
...
// ルールの設定これはプロジェクト等で話し合って設定がいいと思います
rules: {
    // Enable
    quotes: ['warn', 'single'],
    'no-extra-semi': 'warn',
    '@typescript-eslint/no-unused-vars': ['error'],
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',

    // Disable
    'no-unused-vars': 'off',
    'react/react-in-jsx-scope': 'off',
    '@typescript-eslint/no-empty-function': 'off'
  }
...
};

{
  ...
    "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "lint:eslint": "eslint --fix src/**/*.{ts,tsx}", // < 追記
    "eject": "react-scripts eject" // 削除
  },
  ...
}

$ yarn lint:eslint

$ yarn test

PASS  src/App.test.tsx
  ✓ renders learn react link (30 ms)

$ yarn add -D @swc/core @swc/jest 

$ yarn add -D jest-svg-transformer @testing-library/jest-dom

$ yarn jest --init

? Would you like to use Jest when running "test" script in "package.json"?
no

? Would you like to use Typescript for the configuration file?
no

? Choose the test environment that will be used for testing
jsdom (browser-like)

? Do you want Jest to add coverage reports?
yes

? Which provider should be used to instrument code for coverage?
babel

? Automatically clear mock calls, instances and results before every test?
yes

module.exports = {
  clearMocks: true,
  collectCoverage: true,
  coverageDirectory: 'coverage',
  moduleNameMapper: {
    // Aliasの設定
    '^@/(.+)': '<rootDir>/src/$1',
    // Jest で svgファイルを扱えるようにする
    '^.+\\.svg$': 'jest-svg-transformer'
  },
  roots: ['.'],
  testEnvironment: 'jsdom',
  testMatch: ['**/*.test.js', '**/*.test.ts', '**/*.test.tsx'],
  testPathIgnorePatterns: ['/node_modules/'],
  transform: {
    '.+\\.(t|j)sx?$': [
      '@swc/jest',
      {
        sourceMaps: true, 
        module: {
          type: 'commonjs'
        },
        jsc: {
          parser: {
            syntax: 'typescript', 
            tsx: true
          },
          transform: {
            react: {
              runtime: 'automatic'
            }
          }
        }
      }
    ]
  },
  transformIgnorePatterns: ['/node_modules/']
}

$ yarn add -D react-app-rewired customize-cra

$ touch config-overrides.js

const {
  override,
  addWebpackResolve
} = require('customize-cra')
const path = require('path')

module.exports = override(
  addWebpackResolve({
    alias: {
      '@': path.resolve(__dirname, './src/')
    }
  })
)

{
  ...
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest test --coverage",
    "lint:eslint": "eslint --fix src/**/*.{ts,tsx}"
  },
  ...
}

import logo from './logo.svg'

function App() {
  return (
    <div>
      <img src={logo} className="App-logo" alt="logo" />
    </div>
  )
}

export default App

import { render } from '@testing-library/react'

import App from './App'

describe('App Component', () => {
  test('renders main page correctly', async () => {
    render(<App />)
  })
})

$ yarn test

 PASS  src/App.test.tsx
  App Component
    ✓ renders main page correctly (46 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |                   
 App.tsx  |     100 |      100 |     100 |     100 |                   
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.252 s
Ran all test suites.
✨  Done in 5.62s.

touch .eslintignore

config-overrides.js

$ yarn add @mui/material @emotion/react @emotion/styled

import logo from './logo.svg'
import Button from '@mui/material/Button' //テストで追記

function App() {
  return (
    <div>
      <Button variant="contained">Hello World</Button>
      <img src={logo} className="App-logo" alt="logo" />
    </div>
  )
}

export default App

$ yarn start

yarn add @emotion/css

yarn add -D @babel/preset-react @emotion/babel-plugin

const {
  override,
  addWebpackResolve,
  addBabelPresets, // 追記
  addBabelPlugins //  追記
} = require('customize-cra')
const path = require('path')

module.exports = override(
  addBabelPresets(['@babel/preset-react']), //追記
  addBabelPlugins(['@emotion/babel-plugin']),  //追記
  addWebpackResolve({
    alias: {
      '@': path.resolve(__dirname, './src/')
    }
  })
)