Support data component testing (#69)

* support data testing

* fix transform for tsx"
"

* fix babel configs:

* mock intersection observer

* fix intersectionobserver mocks

* fix intersectionobserver mocks

* fix intersectionobserver mocks

* fix intersectionobserver mocks

* rm ts-jest

* bump v

Author: Vincent

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firstlookmedia/react-scripts",
-  "version": "2.0.0-rc20",
+  "version": "2.0.0-rc21",
   "description": "shared react site configs",
   "author": "First Look Media",
   "license": "MIT",
@@ -27,6 +27,7 @@
     "@babel/plugin-transform-runtime": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.3.3",
     "@babel/runtime-corejs2": "^7.0.0",
     "@loadable/babel-plugin": "^5.8.0",
     "@loadable/webpack-plugin": "^5.7.1",
@@ -35,7 +36,7 @@
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.4.2",
     "babel-loader": "^8.0.0",
-    "babel-plugin-relay": "^4.0.0",
+    "babel-plugin-relay": "^5.0.0",
     "chalk": "^2",
     "concat-stream": "^1.6.2",
     "cross-spawn": "^6",
@@ -72,7 +73,6 @@
     "sass-loader": "^7.0.1",
     "start-server-webpack-plugin": "^2.2.5",
     "style-loader": "^0.21",
-    "ts-jest": "23.0.0",
     "ts-loader": "^5.2.1",
     "url-loader": "^1",
     "webpack": "^4",

scripts/utils/babelLoaderConfig.json

@@ -0,0 +1,29 @@
+{
+  "passPerPreset": true,
+  "presets": ["@babel/preset-typescript", "@babel/preset-react", "@babel/preset-env"],
+  "plugins": [
+    [
+      "babel-plugin-relay",
+      {
+        "artifactDirectory": "src/__generated__",
+        "schema": "schema.graphql"
+      }
+    ],
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "corejs": 2
+      }
+    ],
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-json-strings",
+    "@babel/plugin-proposal-function-sent",
+    "@babel/plugin-proposal-export-namespace-from",
+    "@babel/plugin-proposal-numeric-separator",
+    "@babel/plugin-proposal-throw-expressions",
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-nullish-coalescing-operator"
+  ]
+}

scripts/utils/babelTransform.js

@@ -1,28 +1,4 @@
 const babelJest = require('babel-jest');
-const config = require('../../config/webpack.defaults.js');
+const config = require('./babelLoaderConfig.json');
 
-module.exports = babelJest.createTransformer({
-  passPerPreset: true,
-  presets: ['@babel/preset-react', '@babel/preset-env'].map(require.resolve),
-  plugins: [
-    [
-      '@babel/plugin-transform-runtime',
-      {
-        corejs: 2,
-      },
-    ],
-    '@babel/plugin-syntax-dynamic-import',
-    '@babel/plugin-syntax-import-meta',
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-json-strings',
-    '@babel/plugin-proposal-function-sent',
-    '@babel/plugin-proposal-export-namespace-from',
-    '@babel/plugin-proposal-numeric-separator',
-    '@babel/plugin-proposal-throw-expressions',
-    '@babel/plugin-proposal-optional-chaining',
-    '@babel/plugin-proposal-nullish-coalescing-operator',
-  ].map(plugin =>
-    (Array.isArray(plugin)
-      ? require.resolve(plugin[0], plugin[1])
-      : require.resolve(plugin))),
-});
+module.exports = babelJest.createTransformer(config);

scripts/utils/jestConfig.js

@@ -15,7 +15,7 @@ module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   transform: {
     '\\.js$': path.resolve(__dirname, 'babelTransform.js'),
-    '^.+\\.(ts|tsx)$': 'ts-jest',
+    '^.+\\.(ts|tsx)$': path.resolve(__dirname, 'babelTransform.js'),
   },
 
   collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/stories.{js,jsx,ts,tsx}'],

scripts/utils/testSetup.js

@@ -2,6 +2,16 @@ global.requestAnimationFrame = (callback) => {
   setTimeout(callback, 0);
 };
 
+const observeMock = () => null;
+global.IntersectionObserver = function IntersectionObserver() {
+  return {
+    observe: observeMock,
+  };
+};
+global.IntersectionObserverEntry = {
+  prototype: { intersectionRatio: {} },
+};
+
 const Enzyme = require('enzyme');
 const Adapter = require('enzyme-adapter-react-16');