Closed5
Testing with Jest - Expo Documentation ドキュメントの修正
Takanori IshikawaExpo で 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 が一番優先だからか。
Takanori Ishikawaということは TypeScript でプロジェクトを作ったときにうまくいかないはずなので、やるべきは、
このふたつのガイドを実践して、エラーを確認、ドキュメントを修正すること。
Takanori Ishikawaまずは 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 のように、バージョンごとに作られているようだ。今回修正したいのはガイドなので関係なし。
あとはファイルを修正していけば、ブラウザ側も自動でリロードされるのでひたすら修正。
コミット・メッセージ
コミットするときのメッセージは、
- 一般的な指針として How to Write a Git Commit Message に従う
-
[platform][api] Titleという書式- 例えば、
[ios][video] Fixed black screen bug that appears on older devices
- 例えば、
このスクラップは2021/01/10にクローズされました