Closed5

Testing with Jest - Expo Documentation ドキュメントの修正

Expo で Jest を使うドキュメントの修正

ドキュメントは Testing with Jest - Expo Documentation

まずは、テストを導入するプロジェクトを用意するため、Quick Start をやる

$ expo init my-project

ここで "blank" を選択する。ファイル構成は以下

$ tree -L 1  
.
├── App.js
├── app.json
├── assets
├── babel.config.js
├── node_modules
├── package.json
└── yarn.lock

2 directories, 5 files

あとは Testing with Jest - Expo Documentation の通りに進める。

$ yarn add jest-expo --dev

package.json を編集

"scripts": {
  ...
  "test": "jest"
},
"jest": {
  "preset": "jest-expo",
  "transformIgnorePatterns": [
    "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
  ]
}

React-test-renderer も

$ yarn add react-test-renderer --dev

あとは App.test.js を追加して実行

$ yarn test                         
yarn run v1.22.10
$ jest
 PASS  ./App.test.js
  <App />
    ✓ has 1 child (2288ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.748s
Ran all test suites.
✨  Done in 6.74s.

あれ? うまく行くな...。

あ、moduleFileExtensions のデフォルトが .js が一番優先だからか。

まずは Using TypeScript - Expo Documentation を進める。

 $ expo init -t expo-template-blank-typescript

とりあえず、動くことを確認

$ cd my-typescript-app
$ npx tsc
$ npm start

次に Testing with Jest - Expo Documentation を進めていく。

$ npm i jest-expo react-test-renderer --save-dev

Jest の configuration

$ git diff                
diff --git a/package.json b/package.json
index be492a2..f46edd8 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "eject": "expo eject"
+    "eject": "expo eject",
+    "test": "jest"
   },
   "dependencies": {
     "expo": "~40.0.0",
@@ -23,5 +24,11 @@
     "jest-expo": "^40.0.1",
     "typescript": "~4.0.0"
   },
+  "jest": {
+    "preset": "jest-expo",
+    "transformIgnorePatterns": [
+      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
+    ]
+  },
   "private": true
 }

ここから、TypeScript 向け。テストを作成

$ touch App.test.tsx

また、.d.ts もインストール

$ npm i @types/jest @types/react-test-renderer --save-dev

テストのコードそのままだと以下の TypeScript エラーが出る

expect(tree.children.length).toBe(1);
$ npx tsc             
App.test.tsx:10:12 - error TS2531: Object is possibly 'null'.

10     expect(tree.children.length).toBe(1);
              ~~~~

App.test.tsx:10:17 - error TS2339: Property 'children' does not exist on type 'ReactTestRendererJSON | ReactTestRendererJSON[]'.
  Property 'children' does not exist on type 'ReactTestRendererJSON[]'.

10     expect(tree.children.length).toBe(1);
                   ~~~~~~~~


Found 2 errors.

まあ、ここは大して重要ではないので @ts-ignore しておく...。

さて、Jest を実行するとちゃんとエラーが出る。

$ npm run test

> @ test /Users/ishikawasonkyou/Developer/Workspace/ExpoJestDoc/my-typescript-app
> jest

 FAIL  ./App.test.tsx
  <App />
    ✕ has 1 child (50ms)<App /> › has 1 child

    Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

      at createFiberFromTypeAndProps (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16180:21)
      at createFiberFromElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16208:15)
      at reconcileSingleElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5358:23)
      at reconcileChildFibers (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5418:35)
      at reconcileChildren (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7991:28)
      at updateHostRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8547:5)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9994:14)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13800:12)
      at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13728:5)
      at renderRootSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13691:7)

Expo のドキュメントを修正して PR を投げる。

Updating Documentation を参考に、まずはローカルで expo/docs を動かす。

$ cd docs
$ yarn
$ $ yarn dev 
yarn run v1.22.10
$ rimraf .next/preval && next dev -p 3002
ready - started server on http://localhost:3002

SDK の Reference とかは pages/versions/v40.0.0/sdk/app-auth.md のように、バージョンごとに作られているようだ。今回修正したいのはガイドなので関係なし。

あとはファイルを修正していけば、ブラウザ側も自動でリロードされるのでひたすら修正。

コミット・メッセージ

コミットするときのメッセージは、

  1. 一般的な指針として How to Write a Git Commit Message に従う
  2. [platform][api] Title という書式
    • 例えば、[ios][video] Fixed black screen bug that appears on older devices
このスクラップは2021/01/10にクローズされました
ログインするとコメントできます