Experiment with msw

config/jest.setup.ts

@@ -1 +1,32 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import '@testing-library/jest-dom';
+// @ts-ignore
+import { fetch as fetchPolyfill } from 'whatwg-fetch';
+import { TextDecoder, TextEncoder } from 'util';
+import { TransformStream } from 'node:stream/web';
+import { BroadcastChannel } from 'node:worker_threads';
+
+if (!globalThis.fetch) {
+  // @ts-ignore
+  globalThis.fetch = fetchPolyfill;
+}
+
+if (!globalThis.TransformStream) {
+  // @ts-ignore
+  globalThis.TransformStream = TransformStream;
+}
+
+if (!globalThis.TextEncoder) {
+  // @ts-ignore
+  globalThis.TextEncoder = TextEncoder;
+}
+
+if (!globalThis.TextDecoder) {
+  // @ts-ignore
+  globalThis.TextDecoder = TextDecoder;
+}
+
+if (!globalThis.BroadcastChannel) {
+  // @ts-ignore
+  globalThis.BroadcastChannel = BroadcastChannel;
+}

fec.config.js

@@ -31,4 +31,9 @@ module.exports = {
       },
     ],
   },
+  routes: {
+    '/api/chrome-service/v1/user': {
+      target: 'http://localhost:9001',
+    },
+  },
 };

jest.config.js

@@ -1,9 +1,16 @@
-const transformIgnorePatterns = ['node_modules/(?!(uuid)/)'];
+const transformIgnorePatterns = [
+  'node_modules/(?!(@mswjs|msw|until-async|uuid|@bundled-es-modules|strict-event-emitter|outvariant|@open-draft|headers-polyfill|statuses)/)',
+];
 
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
-  preset: 'ts-jest/presets/js-with-babel-esm',
+  preset: 'ts-jest',
   testEnvironment: 'jsdom',
+  extensionsToTreatAsEsm: ['.ts', '.tsx'],
+  transform: {
+    '^.+\\.tsx?$': ['ts-jest', { useESM: true }],
+    '^.+\\.jsx?$': ['babel-jest', { presets: ['@babel/preset-env'] }],
+  },
   coverageDirectory: './coverage/',
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*.js', '!src/**/stories/*'],
@@ -13,4 +20,6 @@ module.exports = {
   },
   transformIgnorePatterns,
   setupFilesAfterEnv: ['<rootDir>/config/jest.setup.ts'],
+  // for msw
+  resolver: '<rootDir>/test-resolver.js',
 };