Jest now can grok Typescript

* Coverage does something, but sadly the coverage reported incorrectly.
* Test has been converted to ts

Fixes #15

Author: sverhoeven

packages/react-scripts/config/jest/transform.js

@@ -7,7 +7,38 @@
  */
 
 const babelJest = require('babel-jest');
+const tsc = require('typescript');
 
-module.exports = babelJest.createTransformer({
+const babelTransformer = babelJest.createTransformer({
   presets: [require.resolve('babel-preset-react-app')]
 });
+
+// TODO load tsconfig.json in created app instead of duplicating tsconfig.compilerOptions here
+const compilerOptions = {
+    // Overwrite module
+    // Jest gives `SyntaxError: Unexpected token import` error when ES6 module are emitted
+    // module: tsc.ModuleKind.ES6,
+    module: tsc.ModuleKind.CommonJS,
+    // Overwrite jsx
+    // Expected Babel transformer to convert jsx to js
+    // but Jest gives `SyntaxError: Unexpected token <` error when set to Preserve
+    // jsx: tsc.JsxEmit.Preserve,
+    jsx: tsc.JsxEmit.React,
+    target: tsc.ScriptTarget.ES6,
+    moduleResolution: tsc.ModuleResolutionKind.NodeJs,
+};
+
+// transpile the source with TypeScript, if needed, and then with Babel
+module.exports = {
+  process(src, path) {
+    if (path.endsWith('.ts') || path.endsWith('.tsx')) {
+      src = tsc.transpile(
+        src,
+        compilerOptions,
+        path,
+        []
+      );
+    }
+    return babelTransformer.process(src, path);
+  },
+};

packages/react-scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nlesc/react-scripts",
-  "version": "0.0.9",
+  "version": "0.0.12",
   "description": "Configuration and scripts for Create React App with Typescript.",
   "repository": "NLeSC/create-react-app",
   "license": "BSD-3-Clause",
@@ -23,6 +23,7 @@
     "react-scripts": "./bin/react-scripts.js"
   },
   "dependencies": {
+    "@types/jest": "^15.1.32",
     "autoprefixer": "6.5.1",
     "awesome-typescript-loader": "^2.2.4",
     "babel-core": "6.17.0",

packages/react-scripts/template/src/App.test.js renamed to packages/react-scripts/template/src/App.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import App from './App';
 
 it('renders without crashing', () => {

packages/react-scripts/utils/createJestConfig.js

@@ -18,8 +18,8 @@ module.exports = (resolve, rootDir, isEjecting) => {
   const setupTestsFile = pathExists.sync(paths.testsSetup) ? '<rootDir>/src/setupTests.js' : undefined;
 
   const config = {
-    collectCoverageFrom: ['src/**/*.{js,jsx}'],
-    moduleFileExtensions: ['jsx', 'js', 'json'],
+    collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'],
+    moduleFileExtensions: ['jsx', 'js', 'json', 'ts', 'tsx'],
     moduleNameMapper: {
       '^.+\\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': resolve('config/jest/FileStub.js'),
       '^.+\\.css$': resolve('config/jest/CSSStub.js')
@@ -28,6 +28,7 @@ module.exports = (resolve, rootDir, isEjecting) => {
     setupTestFrameworkScriptFile: setupTestsFile,
     testPathIgnorePatterns: ['<rootDir>/(build|docs|node_modules)/'],
     testEnvironment: 'node',
+    testRegex: "(/__tests__/.*|\.(test|spec))\.(ts|tsx|js|jsx)$",
   };
   if (rootDir) {
     config.rootDir = rootDir;