jest-circus v24.8.0 doesn't work in the browser

[kvendrik]

🐛 Bug Report

Jest Lite is using v22.1.4 because the latest version of jest-circus (v24.8.0) doesn't work in the browser. I haven't tracked back where browser support stopped exactly but the compilation errors are pretty clear on why the latest version doesn't work in a browser env.

To Reproduce

1. yarn add jest-circus
2. Attempt bundling it for a browser env using a setup like this.

Expected behavior

jest-circus works in a browser environment either by not using Node specific packages or by, in the source, catching and preventing errors for non-Node environments.

Link to repl or repo (highly encouraged)

1. Clone Jest Lite.
2. yarn install.
3. yarn remove jest-circus && yarn add jest-circus.
4. yarn dev.

cc @SimenB

[SimenB]

Thanks! We have a browser test for expect and mock, but not for circus. https://github.com/facebook/jest/blob/master/e2e/browser-support/browserTest.js

[SimenB]

From the build output - those are node core modules. What happens if you set them to mock or empty? Docs: https://webpack.js.org/configuration/node/

We currently run the integration test using mocha - in order to run it using circus we'd have to write a karma adapter. Which we might want at some point, but a bit out of scope for now. We can add an some sort of test that it bundles and is requireable in the browser, though

[SimenB]

I tried to set up a browser build of circus on our side, and get some errors for process.stdout. Not sure how to best deal with those... My diff:

diff --git c/e2e/browser-support/browserTest.js w/e2e/browser-support/browserTest.js
index 2fbeae3d0..ef7529414 100644
--- c/e2e/browser-support/browserTest.js
+++ w/e2e/browser-support/browserTest.js
@@ -9,6 +9,7 @@
 var expect = require('expect');
 var mock = require('jest-mock');
 var prettyFormat = require('pretty-format');
+var circus = require('jest-circus');

 describe('es5 builds in browser', function() {
   it('runs assertions', function() {
@@ -25,4 +26,11 @@ describe('es5 builds in browser', function() {
   it('pretty formats a string', function() {
     expect(prettyFormat('obj')).toBe('"obj"');
   });
+
+  it('circus has correct exports', function() {
+    expect(circus).toBeDefined();
+    // add the exports once the compilation works
+    expect(Object.keys(circus)).toEqual([
+
+    ]);
+  });
 });
diff --git c/packages/jest-circus/package.json w/packages/jest-circus/package.json
index e639199d1..9b4d80a02 100644
--- c/packages/jest-circus/package.json
+++ w/packages/jest-circus/package.json
@@ -9,6 +9,7 @@
   "license": "MIT",
   "main": "build/index.js",
   "types": "build/index.d.ts",
+  "browser": "build-es5/index.js",
   "dependencies": {
     "@babel/traverse": "^7.1.0",
     "@jest/environment": "^24.8.0",
diff --git c/scripts/browserBuild.js w/scripts/browserBuild.js
index 7ca65961a..ed2a5ef77 100644
--- c/scripts/browserBuild.js
+++ w/scripts/browserBuild.js
@@ -68,6 +68,7 @@ function browserBuild(pkgName, entryPath, destination) {
           extensions: ['.js', '.json', '.ts'],
         },
         node: {
+          console: 'mock',
           fs: 'empty',
         },
       },

node scripts/build will then build a browser version using webpack, and yarn karma start will try to run the test in headless chrome. However, it fails during compilation.

Any help appreciated! 🙂

[kvendrik]

Okay so after mocking various Node variables this is what I landed on:

webpack.config.js

{
  ...
  node: {
    fs: 'empty',
    console: 'mock',
  },
  plugins: [
    new webpack.DefinePlugin({
      process: {
        stdout: {
          isTTY: true,
        },
        env: {},
      },
    }),
  ],
  ...
}

That mocks a good amount of variables that version 24 relies on. It mocks process manually because it was the only way to get isTTY working.

With that setup this is what I landed on:

You can find the branch and changes here.

I'm thinking that fixing this might go beyond mocking Node packages in the Webpack config and might require some codebase changes. What do you think?

[SimenB]

If we require code fixes that's totally fine 🙂

[jquense]

@SimenB FYI we are almost done extracting our karma/except/circus hybrid into a karma framework. https://github.com/4Catalyzer/karma-jest

There is a non-trivial amount of work to get this to run nicely in a browser. Not actually b/c of the builtin mocking or process but b/c jest packages are all commonjs, and so you end up with all of jest-util and friends in the bundle b/c you can't tree shake off the unused exports. Nor is the browser build of except all that helpful b/c you end up with lots of duplicated utils when combining with jest-circus. We've taken to using patch-package to manually prune out server specific things and lean up the browser bundle.

In any case tho, you mentioned about that a jest-circus karma framework might be helpful for integration tests here