Merge pull request #4762 from spicyj/ts

Make TypeScript test work with ReactDOM

Author: sophiebits

scripts/jest/preprocessor.js

@@ -7,13 +7,6 @@ var coffee = require('coffee-script');
 
 var tsPreprocessor = require('./ts-preprocessor');
 
-var defaultLibraries = [
-  require.resolve('./jest.d.ts'),
-  require.resolve('../../src/isomorphic/modern/class/React.d.ts'),
-];
-
-var ts = tsPreprocessor(defaultLibraries);
-
 // This assumes the module map has been built. This might not be safe.
 // We should consider consuming this from a built fbjs module from npm.
 var moduleMap = require('fbjs/module-map');
@@ -26,7 +19,7 @@ module.exports = {
       return coffee.compile(src, {'bare': true});
     }
     if (filePath.match(/\.ts$/) && !filePath.match(/\.d\.ts$/)) {
-      return ts.compile(src, filePath);
+      return tsPreprocessor.compile(src, filePath);
     }
     // TODO: make sure this stays in sync with gulpfile
     if (!filePath.match(/\/node_modules\//) &&

scripts/jest/ts-preprocessor.js

@@ -15,14 +15,37 @@ function formatErrorMessage(error) {
   );
 }
 
-function compile(defaultLib, content, contentFilename) {
+function compile(content, contentFilename) {
   var output = null;
   var compilerHost = {
     getSourceFile: function(filename, languageVersion) {
-      if (filename === contentFilename) {
-        return ts.createSourceFile(filename, content, 'ES5', '0');
+      var source;
+      if (filename === 'lib.d.ts') {
+        source = fs.readFileSync(
+          require.resolve('typescript/bin/lib.d.ts')
+        ).toString();
+      } else if (filename === 'jest.d.ts') {
+        source = fs.readFileSync(
+          path.join(__dirname, 'jest.d.ts')
+        ).toString();
+      } else if (filename === contentFilename) {
+        source = content;
+      } else if (/\/(?:React|ReactDOM)(?:\.d)?\.ts$/.test(filename)) {
+        // TypeScript will look for the .d.ts files in each ancestor directory,
+        // so there may not be a file at the referenced path as it climbs the
+        // hierarchy.
+        try {
+          source = fs.readFileSync(filename).toString();
+        } catch (e) {
+          if (e.code == 'ENOENT') {
+            return undefined;
+          }
+          throw e;
+        }
+      } else {
+        throw new Error('Unexpected filename ' + filename);
       }
-      return defaultLib;
+      return ts.createSourceFile(filename, source, 'ES5', '0');
     },
     writeFile: function(name, text, writeByteOrderMark) {
       if (output === null) {
@@ -41,7 +64,11 @@ function compile(defaultLib, content, contentFilename) {
       return '\n';
     },
   };
-  var program = ts.createProgram([contentFilename], tsOptions, compilerHost);
+  var program = ts.createProgram([
+    'lib.d.ts',
+    'jest.d.ts',
+    contentFilename,
+  ], tsOptions, compilerHost);
   var errors = program.getDiagnostics();
   if (!errors.length) {
     var checker = program.getTypeChecker(true);
@@ -54,20 +81,6 @@ function compile(defaultLib, content, contentFilename) {
   return output;
 }
 
-module.exports = function(defaultLibs) {
-  var defaultLibSource = fs.readFileSync(
-    path.join(path.dirname(require.resolve('typescript')), 'lib.d.ts')
-  );
-
-  for (var i = 0; i < defaultLibs.length; i++) {
-    defaultLibSource += '\n' + fs.readFileSync(defaultLibs[i]);
-  }
-
-  var defaultLibSourceFile = ts.createSourceFile(
-    'lib.d.ts', defaultLibSource, 'ES5'
-  );
-
-  return {
-    compile: compile.bind(null, defaultLibSourceFile),
-  };
+module.exports = {
+  compile: compile,
 };

src/isomorphic/modern/class/React.d.ts

@@ -26,7 +26,4 @@ declare module 'React' {
   }
   export var PropTypes : any;
   export function createElement(tag : any, props ?: any, ...children : any[]) : any
-  export function render(element : any, container : any) : any
-  export function unmountComponentAtNode(container : any) : void
-  export function findDOMNode(instance : any) : any
 }

src/isomorphic/modern/class/ReactDOM.d.ts

@@ -0,0 +1,21 @@
+/*!
+ * Copyright 2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+/**
+ * TypeScript Definition File for React.
+ *
+ * Full type definitions are not yet officially supported. These are mostly
+ * just helpers for the unit test.
+ */
+
+declare module 'ReactDOM' {
+  export function render(element : any, container : any) : any
+  export function unmountComponentAtNode(container : any) : void
+  export function findDOMNode(instance : any) : any
+}

src/isomorphic/modern/class/__tests__/ReactTypeScriptClass-test.ts

@@ -8,6 +8,7 @@
  */
 
 import React = require('React');
+import ReactDOM = require('ReactDOM');
 
 // Before Each
 
@@ -27,7 +28,7 @@ class Inner extends React.Component {
 }
 
 function test(element, expectedTag, expectedClassName) {
-  var instance = React.render(element, container);
+  var instance = ReactDOM.render(element, container);
   expect(container.firstChild).not.toBeNull();
   expect(container.firstChild.tagName).toBe(expectedTag);
   expect(container.firstChild.className).toBe(expectedClassName);
@@ -313,7 +314,7 @@ describe('ReactTypeScriptClass', function() {
   it('throws if no render function is defined', function() {
     spyOn(console, 'error');
 
-    expect(() => React.render(React.createElement(Empty), container)).toThrow();
+    expect(() => ReactDOM.render(React.createElement(Empty), container)).toThrow();
 
     expect((<any>console.error).argsForCall.length).toBe(1);
     expect((<any>console.error).argsForCall[0][0]).toBe(
@@ -425,7 +426,7 @@ describe('ReactTypeScriptClass', function() {
       'did-update', { value: 'foo' }, {}
     ]);
     lifeCycles = []; // reset
-    React.unmountComponentAtNode(container);
+    ReactDOM.unmountComponentAtNode(container);
     expect(lifeCycles).toEqual([
       'will-unmount'
     ]);
@@ -527,7 +528,7 @@ describe('ReactTypeScriptClass', function() {
       'DIV',
       'foo'
     );
-    var node = React.findDOMNode(instance);
+    var node = ReactDOM.findDOMNode(instance);
     expect(node).toBe(container.firstChild);
   });