feat(breaking): migrate Flow to TS; remove some deprecated functions and aliases (#881)

* Port types to TS

* Fix CI commands

* Fix typo in yml file

* Address PR comments

* Remove aliased accessibility queries

* Add flow types

* Update build to support TS

* Clean up removed aliased queries

* Move @babel/plugin-transform-flow-strip-types to test config

* Address PR comments

* Delete flow tests

* Retrigger pipeline

* Update src/helpers/timers.ts

Co-authored-by: Michał Pierzchała <thymikee@gmail.com>

Author: AugustinLF

.circleci/config.yml

@@ -34,21 +34,21 @@ jobs:
           root: .
           paths:
             - .
-  lint-and-flow:
+  lint-and-typescript:
     <<: *defaults
     steps:
       - attach_workspace:
           at: ~/react-native-testing-library
       - run: |
           yarn lint
-          yarn flow-check
-  typescript:
+          yarn typecheck
+  flow:
     <<: *defaults
     steps:
       - attach_workspace:
           at: ~/react-native-testing-library
       - run: |
-          yarn typescript-check
+          yarn flow
   tests:
     <<: *defaults
     steps:
@@ -89,10 +89,10 @@ workflows:
   build-and-test:
     jobs:
       - install-dependencies
-      - lint-and-flow:
+      - lint-and-typescript:
           requires:
             - install-dependencies
-      - typescript:
+      - flow:
           requires:
             - install-dependencies
       - tests:

.flowconfig

@@ -19,11 +19,13 @@ node_modules/warning/.*
 .*/node_modules/@react-native-community/cli/.*/.*
 
 [include]
+.*/typings/
 
 [libs]
 node_modules/react-native/interface.js
 node_modules/react-native/flow/
 flow-typed/
+.*/typings/index
 
 [options]
 server.max_workers=4

README.md

@@ -109,11 +109,11 @@ test('form submits two answers', () => {
   const allQuestions = ['q1', 'q2'];
   const mockFn = jest.fn();
 
-  const { getAllByA11yLabel, getByText } = render(
+  const { getAllByLabelText, getByText } = render(
     <QuestionsBoard questions={allQuestions} onSubmit={mockFn} />
   );
 
-  const answerInputs = getAllByA11yLabel('answer input');
+  const answerInputs = getAllByLabelText('answer input');
 
   fireEvent.changeText(answerInputs[0], 'a1');
   fireEvent.changeText(answerInputs[1], 'a2');

babel.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   presets: [
-    '@babel/preset-flow',
+    '@babel/preset-typescript',
     '@babel/preset-react',
     [
       '@babel/preset-env',
@@ -13,4 +13,10 @@ module.exports = {
     ],
   ],
   plugins: ['@babel/plugin-proposal-class-properties'],
+  env: {
+    test: {
+      // https://github.com/react-native-community/upgrade-support/issues/152
+      plugins: ['@babel/plugin-transform-flow-strip-types'],
+    },
+  },
 };

package.json

@@ -2,8 +2,8 @@
   "name": "@testing-library/react-native",
   "version": "9.1.0",
   "description": "Simple and complete React Native testing utilities that encourage good testing practices.",
-  "main": "build/index.js",
-  "typings": "./typings/index.d.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://www.github.com/callstack/react-native-testing-library.git"
@@ -21,26 +21,31 @@
   "files": [
     "build/",
     "jest-preset/",
-    "typings/index.d.ts",
+    "typings/index.flow.js",
     "pure.js",
     "dont-cleanup-after-each.js"
   ],
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-flow-strip-types": "^7.16.0",
     "@babel/preset-env": "^7.9.6",
     "@babel/preset-flow": "^7.9.0",
     "@babel/preset-react": "^7.9.4",
+    "@babel/preset-typescript": "^7.16.0",
     "@callstack/eslint-config": "^11.0.0",
     "@release-it/conventional-changelog": "^2.0.0",
     "@testing-library/jest-native": "~4.0.2",
+    "@types/jest": "^27.0.0",
     "@types/react": "^17.0.0",
-    "@types/react-native": "^0.66.5",
+    "@types/react-native": "^0.66.6",
     "@types/react-test-renderer": "^17.0.0",
     "babel-jest": "^27.0.0",
     "conventional-changelog-cli": "^2.0.11",
+    "cp-cli": "^2.0.0",
     "dedent": "^0.7.0",
+    "del-cli": "^3.0.1",
     "eslint": "^7.0.0",
     "flow-bin": "^0.141.0",
     "flow-copy-source": "^2.0.9",
@@ -61,25 +66,30 @@
     "react-test-renderer": ">=16.0.0"
   },
   "scripts": {
+    "clean": "del build",
     "test": "jest",
-    "flow-check": "flow check",
-    "typescript-check": "tsc --noEmit --skipLibCheck --jsx react ./typings/__tests__/*",
+    "typecheck": "tsc",
+    "flow": "flow",
+    "copy-flowtypes": "cp typings/index.flow.js build",
     "lint": "eslint src --cache",
     "release": "release-it",
-    "prepublish": "yarn build && yarn copy-flowtypes",
-    "copy-flowtypes": "flow-copy-source --ignore __tests__/*.js src build",
-    "build": "rm -rf build; babel src --out-dir build --ignore 'src/__tests__/*'"
+    "prepublish": "yarn build",
+    "build:js": "babel src --out-dir build --extensions \".js,.ts\" --source-maps --ignore \"**/__tests__/**\"",
+    "build:js:watch": "yarn build:js --watch",
+    "build:ts": "tsc --build tsconfig.release.json",
+    "build:ts:watch": "yarn build:ts --watch --preserveWatchOutput",
+    "build": "yarn clean && yarn build:js && yarn build:ts && yarn copy-flowtypes",
+    "prepare": "yarn build"
   },
   "jest": {
     "preset": "../jest-preset",
-    "moduleFileExtensions": [
-      "js",
-      "json"
-    ],
     "rootDir": "./src",
     "testPathIgnorePatterns": [
       "timerUtils"
     ],
-    "testTimeout": 30000
+    "testTimeout": 30000,
+    "transformIgnorePatterns": [
+      "/node_modules/(?!(@react-native|react-native)/).*/"
+    ]
   }
 }