use jest-puppeteer-docker for docker

example/jest-puppeteer.config.js

@@ -1,4 +1,12 @@
+// require from parent node_modules since this test setup otherwise
+// has duplicate jest-puppeteer-docker libs (both in root and in example node_modules)
+// and resolves browserWSEndpoint wrong. in real usage, require normally:
+// const getConfig = require("jest-puppeteer-docker/lib/config");
+const getConfig = require("../node_modules/jest-puppeteer-docker/lib/config");
+const baseConfig = getConfig();
+
 module.exports = {
+    ...baseConfig,
     launch: {
         // dumpio: true,
         // headless: false,

package.json

@@ -3,7 +3,7 @@
     "version": "6.1.1",
     "description": "screenshot tests for your react components in chromium using puppeteer & jest",
     "main": "src/index.js",
-    "types": "build/index.d.ts",
+    "types": "src/index.d.ts",
     "bin": {
         "jestPuppeteerReactDebug": "./bin/debug.js"
     },
@@ -42,7 +42,6 @@
     "homepage": "https://github.com/hapag-lloyd/jest-puppeteer-react#readme",
     "dependencies": {
         "debug": "^4.1.1",
-        "docker-cli-js": "^2.7.1",
         "expect-puppeteer": "^4.4.0",
         "format-util": "^1.0.5",
         "glob": "^7.1.6",
@@ -51,6 +50,7 @@
         "jest-environment-puppeteer": "4.4.0",
         "jest-image-snapshot": "^3.0.1",
         "jest-puppeteer": "^4.4.0",
+        "jest-puppeteer-docker": "^1.3.2",
         "lodash.merge": "^4.6.2",
         "node-fetch": "^2.6.0",
         "ora": "^4.0.3",

src/global.js

@@ -1,5 +1,9 @@
 const setupPuppeteer = require('jest-environment-puppeteer/setup');
 const teardownPuppeteer = require('jest-environment-puppeteer/teardown');
+const {
+    setup: setupPuppeteerWithDocker,
+    teardown: teardownPuppeteerWithDocker
+} = require('jest-puppeteer-docker');
 const ora = require('ora');
 const debug = require('debug')('jest-puppeteer-react');
 const webpack = require('webpack');
@@ -8,22 +12,14 @@ const WebpackDevServer = require('webpack-dev-server');
 const { promisify } = require('util');
 const path = require('path');
 const fs = require('fs');
-const os = require('os');
 const glob = promisify(require('glob'));
-const docker = require('./docker');
-
-const DIR = path.join(os.tmpdir(), 'jest_puppeteer_react_global_setup');
 
 let webpackDevServer;
 
 const getConfig = () => require(path.join(process.cwd(), 'jest-puppeteer-react.config.js'));
 
-module.exports.setup = async function setup(
-    { noInfo = true, rootDir, testPathPattern, debugOnly = false } = {
-        noInfo: true,
-        debugOnly: false,
-    }
-) {
+module.exports.setup = async function setup(jestConfig = {}) {
+    const { noInfo = true, rootDir, testPathPattern, debugOnly = false } = jestConfig;
     // build only files matching testPathPattern
     const testPathPatterRe = new RegExp(testPathPattern, 'i');
     const testFiles = (await glob(`${rootDir}/**/*.browser.@(js|jsx|ts|tsx)`)).filter((file) => {
@@ -85,47 +81,25 @@ module.exports.setup = async function setup(
         return;
     }
 
+    debug('setup jest-puppeteer');
     if (config.useDocker && !debugOnly) {
-        try {
-            spinner.start('Starting Docker for screenshots...');
-            debug('calling docker.start()');
-            const ws = await docker.start(config);
-            debug('websocket is ' + ws);
-            process.env.JEST_PUPPETEER_CONFIG = path.join(DIR, 'config.json');
-            fs.mkdirSync(DIR, { recursive: true });
-            fs.writeFileSync(
-                process.env.JEST_PUPPETEER_CONFIG,
-                JSON.stringify({
-                    connect: {
-                        browserWSEndpoint: ws,
-                    },
-                })
-            );
-            spinner.succeed('Docker started');
-        } catch (e) {
-            console.error(e);
-            throw new Error('Failed to start docker for screenshots');
-        }
+        await setupPuppeteerWithDocker(jestConfig);
+    } else {
+        await setupPuppeteer(jestConfig);
     }
-
-    debug('setup jest-puppeteer');
-    await setupPuppeteer();
 };
 
-module.exports.teardown = async function teardown() {
+module.exports.teardown = async function teardown(jestConfig = {}) {
+    const { debugOnly = false } = jestConfig;
     debug('stopping webpack-dev-server');
     webpackDevServer.close();
 
     const config = getConfig();
-    try {
-        if (config.useDocker) {
-            debug('stopping docker');
-            await docker.stop(config);
-        }
-    } catch (e) {
-        console.error(e);
-    }
 
     debug('teardown jest-puppeteer');
-    await teardownPuppeteer();
+    if (config.useDocker && !debugOnly) {
+        await teardownPuppeteerWithDocker(jestConfig);
+    } else {
+        await teardownPuppeteer(jestConfig);
+    }
 };