React Native, Expo, Jest, TypeScript 的設定 （筆記）

5532 ワード
TypeScript Jest expo reactnative TypeScript テキストリンク

！這是一篇可以快速配置環境的筆記，不會有詳細解說！

安裝各種需要的 packages

安裝和 React Native, Jest, Expo, TypeScript 定義檔 所有相關的玩意：

yarn add -D jest jest-expo ts-jest react-test-renderer @types/jest @types/react-test-renderer

Jest 的設定

在 package.json 檔案中，設定 "jest" 項下的各種參數

{
  "... 省略 ...",

  "jest": {
    "preset": "jest-expo",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
      "^.+\\.tsx?$": "ts-jest"
    },
    "testMatch": [
      "**/__tests__/**/*.ts?(x)",
      "**/?(*.)+(spec|test).ts?(x)"
    ],
    "moduleFileExtensions": [
      "js",
      "ts",
      "tsx"
    ],
    "globals": {
      "ts-jest": {
        "tsConfig": {
          "jsx": "react"
        }
      }
    }
  },

  "... 省略 ..."
}

追加自定義 script

一樣是在 package.json 中， scripts 段加入這些：

{
  "... 省略 ...",

  "scripts": {
    "... 省略 ...",

    "lint:fix": "eslint --fix '*/**/*.{js,ts,tsx}'",
    "test": "yarn lint:fix && yarn tsc-test && yarn jest",
    "tsc-test": "tsc --project . --noEmit",
    "jest": "jest",

    "... 省略 ...",
  },

  "... 省略 ..."
}

執行測試

yarn test

即可

參考資料

牛客練習試合51 A-E