Merge branch 'develop' into feature/sdk-949-update-msw-dependency

jest.preset.js

@@ -74,7 +74,7 @@ module.exports = {
   },
   setupFilesAfterEnv: ['../../jest/jest.setup-dom.js'],
   setupFiles: ['core-js', 'jest-date-mock', '../../jest/jest.polyfills.js'],
-  testEnvironment: 'jest-environment-jsdom',
+  testEnvironment: '../../jest/jsdom-extended.js',
   testRunner: 'jest-circus/runner',
   cacheDirectory: '../../node_modules/.cache/unit-tests',
   watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],

jest/jest.polyfills.js

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
-
 require('isomorphic-fetch');
 
 // Mocking Math random
@@ -18,7 +16,3 @@ console.warn = jest.fn();
 console.error = jest.fn();
 // Mock browsers sendBeacon utility
 navigator.sendBeacon = jest.fn();
-
-import { TextEncoder, TextDecoder } from 'util';
-
-Object.assign(global, { TextDecoder, TextEncoder });

jest/jsdom-extended.js

@@ -0,0 +1,26 @@
+import JSDOMEnvironment from 'jest-environment-jsdom';
+
+// Adding relevant polyfilled extensions in the JSDOm to have msw v2 working
+// More on: https://github.com/mswjs/msw/issues/1916#issuecomment-1919965699
+class JSDOMEnvironmentExtended extends JSDOMEnvironment {
+  constructor(...args) {
+    super(...args);
+
+    this.global.ReadableStream = ReadableStream;
+    this.global.TextDecoder = TextDecoder;
+    this.global.TextEncoder = TextEncoder;
+
+    this.global.Blob = Blob;
+    this.global.File = File;
+    this.global.Headers = Headers;
+    this.global.FormData = FormData;
+    this.global.Request = Request;
+    this.global.Response = Response;
+    this.global.Request = Request;
+    this.global.Response = Response;
+    this.global.fetch = fetch;
+    this.global.structuredClone = structuredClone;
+  }
+}
+
+module.exports = JSDOMEnvironmentExtended;

package.json

@@ -78,7 +78,7 @@
     "axios": "1.6.7",
     "axios-retry": "3.9.1",
     "component-each": "0.2.6",
-    "component-emitter": "1.3.0",
+    "component-emitter": "2.0.0",
     "component-querystring": "2.0.1",
     "component-url": "0.2.1",
     "crypto-es": "2.1.0",
@@ -137,14 +137,15 @@
     "@types/jest": "29.5.12",
     "@types/lodash.clonedeep": "4.5.9",
     "@types/lodash.isstring": "4.0.9",
+    "@types/ms": "0.7.34",
     "@types/node": "20.11.20",
     "@types/ramda": "0.29.10",
     "assert": "2.1.0",
     "babel-eslint": "10.1.0",
     "babel-plugin-transform-object-hasown": "1.1.0",
     "commitizen": "4.3.0",
     "commitlint": "18.6.1",
-    "component-type": "1.2.1",
+    "component-type": "2.0.0",
     "core-js": "3.36.0",
     "dotenv": "16.4.5",
     "each": "2.6.0",
@@ -206,7 +207,8 @@
   },
   "overrides": {
     "debug": "4.3.4",
-    "ip": "2.0.1"
+    "ip": "2.0.1",
+    "component-type": "2.0.0"
   },
   "lint-staged": {
     "*.{json,js,md,ts}": "prettier --write"

packages/analytics-js-common/__fixtures__/msw.handlers.ts

@@ -1,60 +1,81 @@
-import { rest } from 'msw';
+import { http, HttpResponse } from 'msw';
 import { dummyDataplaneHost, dummySourceConfigResponse } from './fixtures';
 
-// TODO: Why on data plane we allow-origin the domain but in sourceConfig is wildcard?
 const handlers = [
-  rest.get(`${dummyDataplaneHost}/rawSample`, (req, res, ctx) => {
-    return res(ctx.status(200), ctx.text('{"raw": "sample"}'));
+  http.get(`${dummyDataplaneHost}/rawSample`, () => {
+    return new HttpResponse('{"raw": "sample"}', {
+      status: 200,
+    });
   }),
-  rest.get(`${dummyDataplaneHost}/brokenJsonSample`, (req, res, ctx) => {
-    return res(
-      ctx.status(200),
-      ctx.text('{raw: sample}'),
-      ctx.set('Content-Type', 'application/json; charset=utf-8'),
-    );
+  http.get(`${dummyDataplaneHost}/brokenJsonSample`, () => {
+    return new HttpResponse('{raw: sample}', {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json; charset=utf-8',
+      },
+    });
   }),
-  rest.get(`${dummyDataplaneHost}/emptyJsonSample`, (req, res, ctx) => {
-    return res(
-      ctx.status(200),
-      ctx.text(''),
-      ctx.set('Content-Type', 'application/json; charset=utf-8'),
-    );
+  http.get(`${dummyDataplaneHost}/emptyJsonSample`, () => {
+    return new HttpResponse('', {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json; charset=utf-8',
+      },
+    });
   }),
-  rest.get(`${dummyDataplaneHost}/jsonSample`, (req, res, ctx) => {
-    return res(ctx.status(200), ctx.json({ json: 'sample' }));
+  http.get(`${dummyDataplaneHost}/jsonSample`, () => {
+    return new HttpResponse(JSON.stringify({ json: 'sample' }), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json; charset=utf-8',
+      },
+    });
   }),
-  rest.get(`${dummyDataplaneHost}/404ErrorSample`, (req, res, ctx) => {
-    return res(ctx.status(404));
+  http.get(`${dummyDataplaneHost}/404ErrorSample`, () => {
+    return new HttpResponse(null, {
+      status: 404,
+    });
   }),
-  rest.get(`${dummyDataplaneHost}/429ErrorSample`, (req, res, ctx) => {
-    return res(ctx.status(429));
+  http.get(`${dummyDataplaneHost}/429ErrorSample`, () => {
+    return new HttpResponse(null, {
+      status: 429,
+    });
   }),
-  rest.get(`${dummyDataplaneHost}/500ErrorSample`, (req, res, ctx) => {
-    return res(ctx.status(500));
+  http.get(`${dummyDataplaneHost}/500ErrorSample`, () => {
+    return new HttpResponse(null, {
+      status: 500,
+    });
   }),
-  rest.get(`${dummyDataplaneHost}/noConnectionSample`, (req, res, ctx) => {
-    return res.networkError('Failed to connect');
+  http.get(`${dummyDataplaneHost}/noConnectionSample`, () => {
+    return HttpResponse.error();
   }),
-  rest.get(`${dummyDataplaneHost}/jsFileSample`, (req, res, ctx) => {
+  http.get(`${dummyDataplaneHost}/jsFileSample.js`, () => {
     const fileContents = 'console.log("jsFileSample script executed")';
-    return res(
-      ctx.status(200),
-      ctx.set('Content-Length', fileContents.length.toString()),
-      ctx.set('Content-Type', 'text/javascript'),
-      ctx.body(fileContents),
-    );
-  }),
-  rest.get(`${dummyDataplaneHost}/jsFileEmpty`, (req, res, ctx) => {
+    return new HttpResponse(fileContents, {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/javascript',
+        'Content-Length': fileContents.length.toString(),
+      },
+    });
+  }),
+  http.get(`${dummyDataplaneHost}/jsFileEmpty.js`, () => {
     const fileContents = '';
-    return res(
-      ctx.status(200),
-      ctx.set('Content-Length', fileContents.length.toString()),
-      ctx.set('Content-Type', 'text/javascript'),
-      ctx.body(fileContents),
-    );
-  }),
-  rest.get(`${dummyDataplaneHost}/sourceConfig`, (req, res, ctx) => {
-    return res(ctx.status(200), ctx.json(dummySourceConfigResponse));
+    return new HttpResponse(fileContents, {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/javascript',
+        'Content-Length': fileContents.length.toString(),
+      },
+    });
+  }),
+  http.get(`${dummyDataplaneHost}/sourceConfig`, () => {
+    return new HttpResponse(JSON.stringify(dummySourceConfigResponse), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json; charset=utf-8',
+      },
+    });
   }),
 ];