From dcbfc3b54df0c706fbd4b90e030bee2f9433dae5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Damian=20P=C5=82aza?= Date: Fri, 31 Jul 2020 11:36:31 +0200 Subject: [PATCH 1/3] Update using workerize-loader within Jest tests MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit See #103 Existing guide on how to make `workerize-loader` working with Webpack and Jest wasn't sufficient. I tried given steps in my project and everything seems working as expected 😄 --- README.md | 35 ++++++++++++++++++++--------------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 68cdcfa..a79c0bd 100644 --- a/README.md +++ b/README.md @@ -105,6 +105,7 @@ All worker code can now use Promises. ### Testing +## Without Webpack To test a module that is normally imported via `workerize-loader` when not using Webpack, import the module directly in your test: ```diff @@ -113,24 +114,28 @@ To test a module that is normally imported via `workerize-loader` when not using const instance = worker(); ``` - -To test modules that rely on workerized imports when not using Webpack, you'll need to dig into your test runner a bit. For Jest, it's possible to define a custom `transform` that emulates workerize-loader on the main thread: - -```js -// in your Jest configuration -{ - "transform": { - "workerize-loader(\\?.*)?!(.*)": "/workerize-jest.js" - } -} +## With Webpack and Jest +In Jest, it's possible to define a custom `transform` that emulates workerize-loader on the main thread. + +Steps to follow: +1. Install dev dependencies `npm i babel-jest identity-object-proxy -D` +2. Add this entry to `moduleNameMapper` section in jest config located in `package.json`: +```ts +"workerize-loader(\\?.*)?!(.*)": "identity-obj-proxy" ``` - -... then add the `workerize-jest.js` shim to your project: - -```js +3. Add this entry to jest config located in `package.json`: +```ts + "transform": { + "workerize-loader(\\?.*)?!(.*)": "/workerize-jest.js", + "^.+\\.[jt]sx?$": "babel-jest", + "^.+\\.[jt]s?$": "babel-jest" + } +``` +4. Add jest custom transformer file `workerize-jest.js` in root dir: +```ts module.exports = { process(src, filename, config, options) { - return 'module.exports = () => require(' + JSON.stringify(filename.replace(/.+!/,'')) + ')'; + return 'module.exports = () => require(' + JSON.stringify(filename.replace(/.+!/, '')) + ')'; }, }; ``` From 04710101810eeafc7b04d33789e5a775c8462472 Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Fri, 8 Jan 2021 20:29:19 -0500 Subject: [PATCH 2/3] Improve transformer to accurately return async functions --- README.md | 56 +++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 38 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index a79c0bd..2e696a3 100644 --- a/README.md +++ b/README.md @@ -114,33 +114,53 @@ To test a module that is normally imported via `workerize-loader` when not using const instance = worker(); ``` + ## With Webpack and Jest + In Jest, it's possible to define a custom `transform` that emulates workerize-loader on the main thread. -Steps to follow: -1. Install dev dependencies `npm i babel-jest identity-object-proxy -D` -2. Add this entry to `moduleNameMapper` section in jest config located in `package.json`: -```ts -"workerize-loader(\\?.*)?!(.*)": "identity-obj-proxy" +First, install `babel-jest` and `identity-object-proxy`: + +```sh +npm i -D babel-jest identity-object-proxy ``` -3. Add this entry to jest config located in `package.json`: -```ts - "transform": { - "workerize-loader(\\?.*)?!(.*)": "/workerize-jest.js", - "^.+\\.[jt]sx?$": "babel-jest", - "^.+\\.[jt]s?$": "babel-jest" - } + +Then, add these properties to the `"transform"` and `"moduleNameMapper"` sections of your Jest config (generally located in your `package.json`): + +```js +{ + "jest": { + "moduleNameMapper": { + "workerize-loader(\\?.*)?!(.*)": "identity-obj-proxy" + }, + "transform": { + "workerize-loader(\\?.*)?!(.*)": "/workerize-jest.js", + "^.+\\.[jt]sx?$": "babel-jest", + "^.+\\.[jt]s?$": "babel-jest" + } + } +} ``` -4. Add jest custom transformer file `workerize-jest.js` in root dir: -```ts + +Finally, create the custom Jest transformer referenced above as a file `workerize-jest.js` in your project's root directory (where the package.json is): + +```js module.exports = { - process(src, filename, config, options) { - return 'module.exports = () => require(' + JSON.stringify(filename.replace(/.+!/, '')) + ')'; - }, + process(src, filename) { + return ` + async function asyncify() { return this.apply(null, arguments); } + module.exports = function() { + const w = require(${JSON.stringify(filename.replace(/^.+!/, ''))}); + const m = {}; + for (let i in w) m[i] = asyncify.bind(w[i]); + return m; + }; + `; + } }; ``` -Now your tests and any modules they import can use `workerize-loader!` prefixes. +Now your tests and any modules they import can use `workerize-loader!` prefixes, and the imports will be turned into async functions just like they are in Workerize. ### Credit From 44817eb4ac5c27d02ece1639401652a7d6039407 Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Fri, 8 Jan 2021 20:30:03 -0500 Subject: [PATCH 3/3] Update README.md --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index dfb1a45..24ad40b 100644 --- a/README.md +++ b/README.md @@ -236,9 +236,9 @@ module.exports = { async function asyncify() { return this.apply(null, arguments); } module.exports = function() { const w = require(${JSON.stringify(filename.replace(/^.+!/, ''))}); - const m = {}; - for (let i in w) m[i] = asyncify.bind(w[i]); - return m; + const m = {}; + for (let i in w) m[i] = asyncify.bind(w[i]); + return m; }; `; }