chore: add a test for the react production bundle

It's failing, see discussion in bazel-contrib#933

examples/BUILD.bazel

@@ -23,6 +23,14 @@ example_integration_test(
     },
 )
 
+example_integration_test(
+    name = "examples_reactjs",
+    npm_packages = {
+        "//packages/jasmine:npm_package": "@bazel/jasmine",
+        "//packages/typescript:npm_package": "@bazel/typescript",
+    },
+)
+
 example_integration_test(
     name = "examples_parcel",
     npm_packages = {

examples/reactjs/BUILD.bazel

@@ -1,21 +1,19 @@
 load("@build_bazel_rules_nodejs//:defs.bzl", "http_server", "rollup_bundle")
 load("@build_bazel_rules_nodejs//internal/web_package:web_package.bzl", "web_package")
+load("@npm_bazel_jasmine//:index.bzl", "jasmine_node_test")
 load("@npm_bazel_typescript//:index.bzl", "ts_devserver", "ts_library")
 
 package(default_visibility = ["//visibility:public"])
 
 ts_library(
     name = "app",
-    srcs = [
-        "app.ts",
-        "greeting.tsx",
-        "react-fix.ts",
-    ],
+    srcs = glob([
+        "*.ts",
+        "*.tsx",
+    ]),
     deps = [
         "@npm//@types/react",
         "@npm//@types/react-dom",
-        "@npm//react",
-        "@npm//react-dom",
     ],
 )
 
@@ -37,8 +35,12 @@ ts_devserver(
 rollup_bundle(
     name = "bundle",
     enable_code_splitting = False,
-    entry_point = ":app.ts",
-    deps = [":app"],
+    entry_point = ":app.prod.ts",
+    deps = [
+        ":app",
+        "@npm//react",
+        "@npm//react-dom",
+    ],
 )
 
 web_package(
@@ -59,9 +61,15 @@ http_server(
 )
 
 # Just a dummy test so that we have a test target for //... on certain bazelci platforms with bazel_integration_test
-sh_test(
-    name = "dummy_test",
-    srcs = ["dummy_test.sh"],
+jasmine_node_test(
+    name = "prodmode_test",
+    srcs = ["prodmode.spec.js"],
+    data = [
+        "bundle.es2015.js",
+        "index.html",
+        "@npm//domino",
+    ],
+    templated_args = ["--node_options=--experimental-modules"],
 )
 
 # For testing from the root workspace of this repository with bazel_integration_test.

examples/reactjs/app.prod.ts

@@ -0,0 +1,5 @@
+import './environment.prod';
+import * as ReactDOM from 'react-dom';
+import greeting from './greeting';
+
+ReactDOM.render(greeting, document.getElementById('root'));

examples/reactjs/app.ts

@@ -1,6 +1,5 @@
-import './react-fix';
-import React from 'react';
-import ReactDOM from 'react-dom';
+import './environment.dev';
+import * as ReactDOM from 'react-dom';
 import greeting from './greeting';
 
 ReactDOM.render(greeting, document.getElementById('root'));

examples/reactjs/env.ts

@@ -0,0 +1 @@
+(window as any).process = {env: {NODE_ENV: 'production'}}

examples/reactjs/environment.d.ts

@@ -0,0 +1,10 @@
+// React uses a "isomorphic" package that relies on
+// `process.env`, even in the browser.
+// Make this type available in TypeScript code.
+declare global {
+  interface Window {
+    process: {}
+  }
+}
+// make this file a module, not a script
+export {};

examples/reactjs/environment.dev.ts

@@ -0,0 +1,5 @@
+// Configure React for development mode
+// https://github.com/bazelbuild/rules_nodejs/issues/555
+window.process = {
+  env: {NODE_ENV: 'development'}
+}

examples/reactjs/environment.prod.ts

@@ -0,0 +1,5 @@
+// Configure React for production
+// https://github.com/bazelbuild/rules_nodejs/issues/555
+window.process = {
+  env: {NODE_ENV: 'production'}
+}

examples/reactjs/greeting.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import * as React from 'react';
 
 const greeting = <h1>Hello, world</h1>;
 export default greeting;

examples/reactjs/package.json

@@ -1,15 +1,16 @@
 {
   "devDependencies": {
-    "@bazel/hide-bazel-files": "latest",
+    "@bazel/jasmine": "latest",
     "@bazel/typescript": "latest",
+    "@types/react": "^16.9.2",
+    "@types/react-dom": "^16.9.0",
+    "domino": "^2.1.3",
     "typescript": "2.7.x"
   },
   "scripts": {
     "test": "bazel test ..."
   },
   "dependencies": {
-    "@types/react": "^16.9.2",
-    "@types/react-dom": "^16.9.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   }

examples/reactjs/prodmode.spec.js

@@ -0,0 +1,18 @@
+const domino = require('domino');
+const path = require('path');
+const fs = require('fs');
+
+describe('react webapp', () => {
+  it('works', () => {
+    const html = fs.readFileSync(path.join(__dirname, 'index.html'));
+    // Domino gives us enough of the DOM API that we can run our JavaScript in node rather than the
+    // browser. That makes this test a lot faster
+    global.window = domino.createWindow(html, '/');
+    global.document = global.window.document;
+    global.navigator = global.window.navigator;
+    // Make all Domino types available as types in the global env.
+    Object.assign(global, domino.impl);
+
+import(path.join(__dirname, 'bundle.es2015')).then(() => {expect(global.document.body.textContent).toEqual('Hello from React!')});
+  });
+});

examples/reactjs/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react",
     "strict": true,
     "lib": ["es2015.promise", "dom", "es5"],
     // to fix https://github.com/bazelbuild/rules_nodejs/issues/933