Add React Typescript E2E Tests (#240)

Create E2E helpers

Change options passed to ForkTsChecker Webpack Plugin. Now async relies to env, use typescript incremental api to more faster type checking and avoid override compilerOptions

e2e-helpers/crossPlatformCommand.ts

@@ -0,0 +1,2 @@
+export const crossPlatformCommand = (cmd: string) =>
+  process.platform === 'win32' ? cmd + '.cmd' : cmd;

e2e-helpers/run.ts

@@ -0,0 +1,45 @@
+import { spawn, ChildProcessWithoutNullStreams } from 'child_process';
+import * as path from 'path';
+import { crossPlatformCommand } from './crossPlatformCommand';
+import { waitForHttpStatus } from './waitForHttpStatus';
+
+export async function run(
+  cwd: string,
+  args: string[],
+  port?: number
+): Promise<{
+  errors: string[];
+  messages: string[];
+  process: ChildProcessWithoutNullStreams;
+}> {
+  const process = spawn(crossPlatformCommand('yarn'), args, {
+    cwd
+  });
+
+  const stdoutMessages: string[] = [];
+  const stderrMessages: string[] = [];
+
+  process.stdout &&
+    process.stdout.on('data', data => {
+      stdoutMessages.push(data.toString());
+    });
+
+  process.stderr &&
+    process.stderr.on('data', data => {
+      stderrMessages.push(data.toString());
+    });
+
+  if (port) {
+    await waitForHttpStatus({
+      port,
+      host: 'localhost',
+      canContinue: () => stderrMessages.length === 0
+    });
+  }
+
+  return {
+    process,
+    errors: stderrMessages,
+    messages: stdoutMessages
+  };
+}

e2e-helpers/waitForHttpStatus.ts

@@ -0,0 +1,44 @@
+import { request } from 'http';
+
+export const waitForHttpStatus = ({
+  host,
+  port,
+  timeout = 100,
+  ejectTimeout = 8000,
+  method = 'GET',
+  expectedStatusCode = 200,
+  canContinue = () => true
+}: {
+  host: string;
+  port: number;
+  timeout?: number;
+  ejectTimeout?: number;
+  method?: string;
+  expectedStatusCode?: number;
+  canContinue?: () => boolean;
+}) =>
+  new Promise((resolve, reject) => {
+    const retry = () => setTimeout(main, timeout);
+
+    let totalTimeout = 0;
+    const main = () => {
+      const req = request({ port, host }, response => {
+        if (response.statusCode === expectedStatusCode) {
+          return resolve();
+        }
+
+        if (!canContinue() || totalTimeout > ejectTimeout) {
+          return reject();
+        }
+
+        totalTimeout += timeout;
+
+        retry();
+      });
+
+      req.on('error', retry);
+      req.end();
+    };
+
+    main();
+  });

examples/__tests__/react-typescript.test.ts

@@ -0,0 +1,32 @@
+import getPort = require('get-port');
+import { run } from '../../e2e-helpers/run';
+import * as path from "path";
+
+const workPath = path.join(require.resolve('../react-typescript/package.json'), '..');
+
+describe('example:react-typescript', () => {
+  beforeAll(() => jest.setTimeout(1000 * 60));
+
+  it('start', async () => {
+    const port = await getPort();
+
+    const {
+      errors,
+      messages
+    } = await run(workPath, ['start', '--smokeTest', `--port`, port.toString()], port);
+
+    expect(errors.length).toBe(0);
+  });
+
+  it('build', async () => {
+    const {
+      process,
+      errors,
+      messages
+    } = await run(workPath, ['build']);
+
+    process.on('exit', () => {
+      expect(errors.length).toBe(0);
+    });
+  });
+});

examples/__tests__/react.test.ts

@@ -0,0 +1,32 @@
+import getPort = require('get-port');
+import { run } from '../../e2e-helpers/run';
+import * as path from "path";
+
+const workPath = path.join(require.resolve('../react/package.json'), '..');
+
+describe('example:react', () => {
+  beforeAll(() => jest.setTimeout(1000 * 60));
+
+  it('start', async () => {
+    const port = await getPort();
+
+    const {
+      errors,
+      messages
+    } = await run(workPath, ['start', '--smokeTest', `--port`, port.toString()], port);
+
+    expect(errors.length).toBe(0);
+  });
+
+  it('build', async () => {
+    const {
+      process,
+      errors,
+      messages
+    } = await run(workPath, ['build']);
+
+    process.on('exit', () => {
+      expect(errors.length).toBe(0);
+    });
+  });
+});

examples/react-typescript/package.json

@@ -11,15 +11,15 @@
     "react-dom": "16.7.0"
   },
   "devDependencies": {
-    "@types/node": "10.12.20",
-    "@types/react": "16.7.22",
-    "@types/react-dom": "16.0.11",
+    "@types/node": "11.13.2",
+    "@types/react": "16.8.13",
+    "@types/react-dom": "16.8.3",
     "@zero-scripts/extension.webpack-babel.react": "^0.4.0",
     "@zero-scripts/extension.webpack-css": "^0.4.0",
     "@zero-scripts/extension.webpack-eslint.react": "^0.4.0",
     "@zero-scripts/extension.webpack-pwa": "^0.4.0",
     "@zero-scripts/preset.webpack-spa": "^0.4.0",
-    "fork-ts-checker-webpack-plugin": "1.0.0-alpha.6",
-    "typescript": "3.2.4"
+    "fork-ts-checker-webpack-plugin": "1.0.0-alpha.10",
+    "typescript": "3.4.2"
   }
 }

examples/react/package.json

@@ -7,8 +7,8 @@
     "build": "webpack-spa build"
   },
   "dependencies": {
-    "react": "16.7.0",
-    "react-dom": "16.7.0"
+    "react": "16.8.6",
+    "react-dom": "16.8.6"
   },
   "devDependencies": {
     "@zero-scripts/extension.webpack-babel.react": "^0.4.0",

packages/extension.webpack-babel/src/WebpackBabelExtension.ts

@@ -74,7 +74,7 @@ export class WebpackBabelExtension<
         };
       });
 
-      config.insertPlugin(({ paths, useTypescript }) => {
+      config.insertPlugin(({ paths, useTypescript, isDev }) => {
         let ForkTsCheckerPlugin = undefined;
 
         if (useTypescript) {
@@ -91,17 +91,10 @@ export class WebpackBabelExtension<
         return ForkTsCheckerPlugin
           ? new ForkTsCheckerPlugin({
               typescript: require.resolve('typescript'),
-              async: true,
+              async: isDev,
               checkSyntacticErrors: true,
+              useTypescriptIncrementalApi: true,
               tsconfig: paths.tsConfig,
-              compilerOptions: {
-                module: 'esnext',
-                moduleResolution: 'node',
-                resolveJsonModule: true,
-                isolatedModules: true,
-                noEmit: true,
-                jsx: 'preserve'
-              },
               reportFiles: [
                 '**',
                 '!**/*.json',