Native Integration for Running Unit Tests in CodeSandbox (codesandbox#445)

* Adding native integration for unit tests

* Apply jest globals to evaluation

* Creating new Test Manager

* Hooking Test Runner up with Test Manager

* Reset results in test manager on re-evaluation

* Fixing calls to manager from test manager

* Fixing dispatch for test results to Console

* Renaming for clarity (jest-lite, test-runner)

* Fixing jest mock export

* Update Console logging for test message + Find tests in __tests__

- Added support for nested describes
- Added summary messages for test runs
- Log failing tests with file path
- Added support for finding tests in __tests__
-

* Fix for failed message count

* Moving globals to Test Runner class

* Adding typescript support

* Fix manager

* Add test time to summary

* Remove odd file

* Adding myself to contributors

Author: gautamarora

.all-contributorsrc

@@ -274,6 +274,16 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "gautamarora",
+      "name": "Gautam Arora",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/1215971?v=4",
+      "profile": "https://twitter.com/gautam",
+      "contributions": [
+        "code",
+        "ideas"
+      ]
     }
   ]
 }

packages/app/src/app/components/sandbox/Preview/DevTools/Console/index.js

@@ -90,6 +90,26 @@ class Console extends React.Component<Props, State> {
         }
         break;
       }
+      case 'test-result': {
+        const { result, error } = data;
+
+        const aggregatedResults = result ? CircularJSON.parse(result) : result;
+        const { summaryMessage, failedMessages } = aggregatedResults;
+
+        if (!error) {
+          if (aggregatedResults) {
+            this.addMessage('log', [summaryMessage]);
+            failedMessages.forEach(t => {
+              this.addMessage('warn', [t]);
+            });
+          } else {
+            this.addMessage('warn', [undefined], 'return');
+          }
+        } else {
+          this.addMessage('error', [aggregatedResults]);
+        }
+        break;
+      }
       default: {
         break;
       }

packages/app/src/sandbox/compile.js

@@ -5,6 +5,8 @@ import _debug from 'app/utils/debug';
 import initializeErrorTransformers from './errors/transformers';
 import getPreset from './eval';
 import Manager from './eval/manager';
+import TestRunner from './eval/tests/jest-lite';
+import transformJSON from './console/transform-json';
 
 import { resetScreen } from './status-screen';
 
@@ -192,6 +194,21 @@ async function compile({
       initializeResizeListener();
     }
 
+    //Testing
+    const ttt = Date.now();
+    let testRunner = manager.testRunner;
+    testRunner.initialize();
+    testRunner.findTests(modules);
+    await testRunner.runTests();
+    let aggregatedResults = testRunner.reportResults();
+    debug(`Test Evaluation time: ${Date.now() - ttt}ms`);
+
+    dispatch({
+      type: 'test-result',
+      result: transformJSON(aggregatedResults),
+    });
+    //End - Testing
+
     debug(`Total time: ${Date.now() - startTime}ms`);
 
     dispatch({

packages/app/src/sandbox/eval/loaders/eval.js

@@ -6,28 +6,33 @@ export default function(
   code: string,
   require: Function,
   module: Object,
-  env: Object = {}
+  env: Object = {},
+  globals: Object = {}
 ) {
   const exports = module.exports;
 
   const global = window;
   const process = buildProcess(env);
   window.global = global;
 
+  const globalsCode = ', ' + Object.keys(globals).join(', ');
+  const globalsValues = Object.keys(globals).map(k => globals[k]);
+
   try {
-    const newCode = `(function evaluate(require, module, exports, process, setImmediate, Buffer, global) {${
-      code
-    }\n})`;
+    const newCode = `(function evaluate(require, module, exports, process, setImmediate, Buffer, global${
+      globalsCode
+    }) {${code}\n})`;
     // eslint-disable-next-line no-eval
-    (0, eval)(newCode)(
+    (0, eval)(newCode).apply(this, [
       require,
       module,
       exports,
       process,
       setImmediate,
       Buffer,
-      global
-    );
+      global,
+      ...globalsValues,
+    ]);
 
     return module.exports;
   } catch (e) {

packages/app/src/sandbox/eval/manager.js

@@ -16,6 +16,7 @@ import coreLibraries from './npm/get-core-libraries';
 import getDependencyName from './utils/get-dependency-name';
 import DependencyNotFoundError from '../errors/dependency-not-found-error';
 import ModuleNotFoundError from '../errors/module-not-found-error';
+import TestRunner from './tests/jest-lite';
 
 type Externals = {
   [name: string]: string,
@@ -77,6 +78,7 @@ export default class Manager {
   webpackHMR: boolean = false;
   hardReload: boolean = false;
   hmrStatus: 'idle' | 'check' | 'apply' | 'fail' = 'idle';
+  testRunner: TestRunner;
 
   // List of modules that are being transpiled, to prevent duplicate jobs.
   transpileJobs: { [transpiledModuleId: string]: true };
@@ -90,6 +92,7 @@ export default class Manager {
     this.cachedPaths = {};
     this.transpileJobs = {};
     modules.forEach(m => this.addModule(m));
+    this.testRunner = new TestRunner(this);
 
     if (process.env.NODE_ENV === 'development') {
       window.manager = this;

packages/app/src/sandbox/eval/tests/jest-lite.js

@@ -0,0 +1,216 @@
+// @flow
+import expect from 'jest-matchers';
+import jestMock from 'jest-mock';
+import { getCurrentManager } from '../../compile';
+
+const describe = (name, fn) => {
+  const testRunner = getCurrentManager().testRunner;
+  testRunner.setCurrentDescribe(name);
+  fn();
+  testRunner.resetCurrentDescribe(name);
+};
+
+const test = (name, fn) => {
+  const testRunner = getCurrentManager().testRunner;
+  let error = false;
+  try {
+    fn();
+  } catch (Error) {
+    error = true;
+    testRunner.addResult({ status: 'fail', name });
+  } finally {
+    if (!error) {
+      testRunner.addResult({ status: 'pass', name });
+    }
+  }
+};
+
+export default class TestRunner {
+  tests: Array;
+  aggregatedResults: Object;
+  currentDescribe: String;
+  manager: Manager;
+  startTime: Date;
+  endTime: Date;
+
+  constructor(manager) {
+    this.tests = [];
+    this.aggregatedResults = this._makeEmptyAggregatedResults();
+    this.currentDescribe = '';
+    this.currentPath = '';
+    this.manager = manager;
+    this.startTime = Date.now();
+    this.endTime = Date.now();
+  }
+
+  _makeEmptyAggregatedResults() {
+    return {
+      failedTestSuites: 0,
+      failedTests: 0,
+      passedTestSuites: 0,
+      passedTests: 0,
+      totalTestSuites: 0,
+      totalTests: 0,
+      summaryMessage: '',
+      failedMessages: [],
+      results: [],
+    };
+  }
+
+  initialize() {
+    this.resetResults();
+    this.startTime = Date.now();
+    this.endTime = Date.now();
+  }
+
+  static testGlobals() {
+    return {
+      describe,
+      test,
+      it: test,
+      expect,
+      jest: jestMock,
+    };
+  }
+
+  findTests(modules) {
+    this.tests = modules.filter(m => {
+      let matched = false;
+      if (
+        m.path.includes('__tests__') &&
+        (m.path.endsWith('.js') || m.path.endsWith('.ts'))
+      ) {
+        matched = true;
+      }
+      if (m.path.endsWith('.test.js') || m.path.endsWith('.test.ts')) {
+        matched = true;
+      }
+      if (m.path.endsWith('.spec.js') || m.path.endsWith('.spec.ts')) {
+        matched = true;
+      }
+      return matched;
+    });
+  }
+
+  async transpileTests() {
+    for (let t of this.tests) {
+      await this.manager.transpileModules(t);
+    }
+  }
+
+  async runTests() {
+    await this.transpileTests();
+    this.tests.forEach(t => {
+      this.setCurrentPath(t.path);
+      this.manager.evaluateModule(t);
+      this.resetCurrentPath();
+    });
+  }
+
+  addResult({ status, name }) {
+    let describe = this.currentDescribe;
+    let path = this.currentPath;
+
+    this.aggregatedResults.results.push({ status, name, describe, path });
+
+    this.aggregatedResults.totalTests++;
+    if (status === 'pass') {
+      this.aggregatedResults.passedTests++;
+    } else {
+      this.aggregatedResults.failedTests++;
+    }
+    let totalTestSuites = new Set();
+    let failedTestSuites = new Set();
+    this.aggregatedResults.results.forEach(({ status, path }) => {
+      totalTestSuites.add(path);
+      if (status === 'fail') {
+        failedTestSuites.add(path);
+      }
+    });
+    this.aggregatedResults.totalTestSuites = totalTestSuites.size;
+    this.aggregatedResults.failedTestSuites = failedTestSuites.size;
+    this.aggregatedResults.passedTestSuites =
+      totalTestSuites.size - failedTestSuites.size;
+  }
+
+  reportResults() {
+    let aggregatedResults = this.aggregatedResults;
+    let results = this.aggregatedResults.results;
+    let summaryMessage = '';
+    let failedMessages = [];
+    let summaryEmoji = '';
+
+    if (aggregatedResults.totalTestSuites === 0) {
+      return null;
+    }
+
+    results.forEach(({ status, name, describe, path }) => {
+      if (status === 'fail') {
+        let message = `FAIL (${path}) `;
+        if (describe) {
+          message += `${describe} > `;
+        }
+        message += `${name}`;
+        failedMessages.push(message);
+      }
+    });
+
+    summaryEmoji =
+      aggregatedResults.totalTestSuites === aggregatedResults.passedTestSuites
+        ? '😎'
+        : '👻';
+    summaryMessage = `Test Summary: ${summaryEmoji}\n\n`;
+    summaryMessage += 'Test Suites: ';
+    if (aggregatedResults.failedTestSuites !== null) {
+      summaryMessage += `${aggregatedResults.failedTestSuites} failed, `;
+    }
+    if (aggregatedResults.passedTestSuites !== null) {
+      summaryMessage += `${aggregatedResults.passedTestSuites} passed, `;
+    }
+    summaryMessage += `${aggregatedResults.totalTestSuites} total`;
+    summaryMessage += '\n';
+
+    summaryMessage += 'Tests: ';
+    if (aggregatedResults.failedTests !== null) {
+      summaryMessage += `${aggregatedResults.failedTests} failed, `;
+    }
+    if (aggregatedResults.passedTests !== null) {
+      summaryMessage += `${aggregatedResults.passedTests} passed, `;
+    }
+    summaryMessage += `${aggregatedResults.totalTests} total`;
+    summaryMessage += '\n';
+
+    this.endTime = Date.now();
+    this.duration = this.endTime - this.startTime;
+    summaryMessage += `Time: ${this.duration}ms`;
+    summaryMessage += '\n';
+
+    aggregatedResults.summaryMessage = summaryMessage;
+    aggregatedResults.failedMessages = failedMessages;
+    return aggregatedResults;
+  }
+
+  resetResults() {
+    this.aggregatedResults = this._makeEmptyAggregatedResults();
+  }
+
+  setCurrentDescribe(name) {
+    if (this.currentDescribe) {
+      this.currentDescribe += ` > ${name}`;
+    } else {
+      this.currentDescribe += `${name}`;
+    }
+  }
+
+  resetCurrentDescribe() {
+    this.currentDescribe = '';
+  }
+
+  setCurrentPath(name) {
+    this.currentPath = name;
+  }
+
+  resetCurrentPath() {
+    this.currentPath = '';
+  }
+}

packages/app/src/sandbox/eval/transpiled-module.js

@@ -18,6 +18,8 @@ import type { WarningStructure } from './transpilers/utils/worker-warning-handle
 import resolveDependency from './loaders/dependency-resolver';
 import evaluate from './loaders/eval';
 
+import TestRunner from './tests/jest-lite';
+
 import Manager from './manager';
 import HMR from './hmr';
 
@@ -661,7 +663,8 @@ export default class TranspiledModule {
         this.source.compiledCode,
         require,
         this.compilation,
-        manager.envVariables
+        manager.envVariables,
+        TestRunner.testGlobals()
       );
 
       const hmrConfig = this.hmrConfig;