update proxy-client-js (#139)

Tymek · web-flow · commit cef8536ba003 · 2023-10-10T15:00:00.000+02:00
diff --git a/package.json b/package.json
@@ -35,23 +35,23 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^8.0.1",
-    "@types/react": "^18.2.11",
-    "@vitest/coverage-istanbul": "^0.32.0",
-    "happy-dom": "^9.20.3",
+    "@types/react": "^18.2.27",
+    "@vitest/coverage-istanbul": "^0.34.6",
+    "happy-dom": "^12.9.1",
     "jsdom": "^22.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
-    "typescript": "^5.1.3",
-    "unleash-proxy-client": "^2.5.0",
-    "vite": "^4.3.9",
-    "vite-plugin-dts": "^2.3.0",
-    "vitest": "^0.32.0"
+    "typescript": "^5.2.2",
+    "unleash-proxy-client": "3.0.0-beta.2",
+    "vite": "^4.4.11",
+    "vite-plugin-dts": "^3.6.0",
+    "vitest": "^0.32.4"
   },
   "peerDependencies": {
-    "unleash-proxy-client": "^2.5.0"
+    "unleash-proxy-client": "3.0.0-beta.2"
   }
 }
diff --git a/src/FlagProvider.test.tsx b/src/FlagProvider.test.tsx
@@ -1,18 +1,10 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { render, screen, RenderOptions } from '@testing-library/react';
-import * as UnleashClientModule from 'unleash-proxy-client';
+import { render, screen } from '@testing-library/react';
+import { type Mock } from 'vitest';
+import { UnleashClient, type IVariant, EVENTS } from 'unleash-proxy-client';
 import FlagProvider from './FlagProvider';
 import FlagContext from './FlagContext';
-
 import '@testing-library/jest-dom';
-import { EVENTS } from 'unleash-proxy-client';
-interface IFlagProvider {
-  config: UnleashClientModule.IConfig;
-}
-interface renderConsumerOptions {
-  providerProps: IFlagProvider;
-  renderOptions: RenderOptions;
-}
 
 const getVariantMock = vi.fn().mockReturnValue('A');
 const updateContextMock = vi.fn();
@@ -21,7 +13,6 @@ const stopClientMock = vi.fn();
 const onMock = vi.fn().mockReturnValue('subscribed');
 const offMock = vi.fn();
 const isEnabledMock = vi.fn().mockReturnValue(true);
-const UnleashClientSpy = vi.spyOn(UnleashClientModule, 'UnleashClient');
 
 const givenConfig = {
   appName: 'my-app',
@@ -31,12 +22,7 @@ const givenConfig = {
 const givenFlagName = 'test';
 const givenContext = { session: 'context' };
 
-beforeEach(() => {
-  onMock.mockClear();
-});
-
-// @ts-expect-error
-UnleashClientSpy.mockReturnValue({
+const UnleashClientSpy = vi.fn().mockReturnValue({
   getVariant: getVariantMock,
   updateContext: updateContextMock,
   start: startClientMock,
@@ -46,18 +32,24 @@ UnleashClientSpy.mockReturnValue({
   off: offMock,
 });
 
+vi.mock('unleash-proxy-client', async (importOriginal) => {
+  const mod = await importOriginal();
+
+  return {
+    ...mod as any,
+    UnleashClient: vi.fn(),
+  };
+});
+
 const noop = () => {};
 
 const FlagConsumerAfterClientInit = () => {
   const { updateContext, isEnabled, getVariant, client, on } =
     useContext(FlagContext);
   const [enabled, setIsEnabled] = useState(false);
-  const [variant, setVariant] = useState<UnleashClientModule.IVariant | null>(
-    null
-  );
+  const [variant, setVariant] = useState<IVariant | null>(null);
   const [context, setContext] = useState<any>('nothing');
-  const [currentOn, setCurrentOn] =
-    useState<UnleashClientModule.UnleashClient | null>(null);
+  const [currentOn, setCurrentOn] = useState<UnleashClient | null>(null);
 
   useEffect(() => {
     if (client) {
@@ -82,12 +74,9 @@ const FlagConsumerBeforeClientInit = () => {
   const { updateContext, isEnabled, getVariant, client, on } =
     useContext(FlagContext);
   const [enabled, setIsEnabled] = useState(false);
-  const [variant, setVariant] = useState<UnleashClientModule.IVariant | null>(
-    null
-  );
+  const [variant, setVariant] = useState<IVariant | null>(null);
   const [context, setContext] = useState<any>('nothing');
-  const [currentOn, setCurrentOn] =
-    useState<UnleashClientModule.UnleashClient | null>(null);
+  const [currentOn, setCurrentOn] = useState<UnleashClient | null>(null);
 
   useEffect(() => {
     if (!client) {
@@ -101,36 +90,18 @@ const FlagConsumerBeforeClientInit = () => {
   return <></>;
 };
 
-const renderConsumer = (
-  ui: any,
-  { providerProps, renderOptions }: renderConsumerOptions
-) => {
-  return render(
-    <FlagProvider config={providerProps.config}>{ui}</FlagProvider>,
-    renderOptions
-  );
-};
-
-const renderConsumerWithUnleashClient = (
-  ui: any,
-  { providerProps, renderOptions }: renderConsumerOptions
-) => {
-  const client = new UnleashClientModule.UnleashClient(providerProps.config);
-  return render(
-    <FlagProvider unleashClient={client}>{ui}</FlagProvider>,
-    renderOptions
-  );
-};
+beforeEach(() => {
+  onMock.mockClear();
+  (UnleashClient as Mock).mockImplementation(UnleashClientSpy);
+});
 
 test('A consumer that subscribes AFTER client init shows values from provider and calls all the functions', () => {
-  const providerProps = {
-    config: givenConfig,
-  };
-
-  renderConsumer(<FlagConsumerAfterClientInit />, {
-    providerProps,
-    renderOptions: {},
-  });
+  render(
+    <FlagProvider config={givenConfig}>
+      <FlagConsumerAfterClientInit />
+    </FlagProvider>,
+    {}
+  );
 
   expect(getVariantMock).toHaveBeenCalledWith(givenFlagName);
   expect(isEnabledMock).toHaveBeenCalledWith(givenFlagName);
@@ -150,29 +121,25 @@ test('A consumer that subscribes AFTER client init shows values from provider an
 });
 
 test('A consumer that subscribes BEFORE client init shows values from provider and calls all the functions', () => {
-  const providerProps = {
-    config: givenConfig,
-  };
-
-  renderConsumer(<FlagConsumerBeforeClientInit />, {
-    providerProps,
-    renderOptions: {},
-  });
+  render(
+    <FlagProvider config={givenConfig}>
+      <FlagConsumerBeforeClientInit />
+    </FlagProvider>,
+    {}
+  );
 
   expect(getVariantMock).toHaveBeenCalledWith(givenFlagName);
   expect(isEnabledMock).toHaveBeenCalledWith(givenFlagName);
   expect(updateContextMock).toHaveBeenCalledWith(givenContext);
 });
 
 test('A consumer should be able to get a variant when the client is passed into the provider as props', () => {
-  const providerProps = {
-    config: givenConfig,
-  };
-
-  renderConsumerWithUnleashClient(<FlagConsumerAfterClientInit />, {
-    providerProps,
-    renderOptions: {},
-  });
+  render(
+    <FlagProvider unleashClient={new UnleashClient(givenConfig)}>
+      <FlagConsumerAfterClientInit />
+    </FlagProvider>,
+    {}
+  );
 
   expect(getVariantMock).toHaveBeenCalledWith(givenFlagName);
   expect(isEnabledMock).toHaveBeenCalledWith(givenFlagName);
@@ -224,7 +191,6 @@ test('A memoized consumer should not rerender when the context provider values a
 
 test('should update when ready event is sent', () => {
   const localMock = vi.fn();
-  // @ts-expect-error
   UnleashClientSpy.mockReturnValue({
     getVariant: getVariantMock,
     updateContext: updateContextMock,
@@ -235,11 +201,7 @@ test('should update when ready event is sent', () => {
     off: offMock,
   });
 
-  const providerProps = {
-    config: givenConfig,
-  };
-
-  const client = new UnleashClientModule.UnleashClient(providerProps.config);
+  const client = new UnleashClient(givenConfig);
 
   render(
     <FlagProvider unleashClient={client}>
@@ -258,7 +220,6 @@ test('should update when ready event is sent', () => {
 
 test('should register error when error event is sent', () => {
   const localMock = vi.fn();
-  // @ts-expect-error
   UnleashClientSpy.mockReturnValue({
     getVariant: getVariantMock,
     updateContext: updateContextMock,
@@ -269,11 +230,7 @@ test('should register error when error event is sent', () => {
     off: offMock,
   });
 
-  const providerProps = {
-    config: givenConfig,
-  };
-
-  const client = new UnleashClientModule.UnleashClient(providerProps.config);
+  const client = new UnleashClient(givenConfig);
 
   render(
     <FlagProvider unleashClient={client}>
@@ -293,7 +250,6 @@ test('should register error when error event is sent', () => {
 test('should not start client if startClient is false', () => {
   const localMock = vi.fn();
   const stopMock = vi.fn();
-  // @ts-expect-error
   UnleashClientSpy.mockReturnValue({
     getVariant: getVariantMock,
     updateContext: updateContextMock,
@@ -304,11 +260,7 @@ test('should not start client if startClient is false', () => {
     off: offMock,
   });
 
-  const providerProps = {
-    config: givenConfig,
-  };
-
-  const client = new UnleashClientModule.UnleashClient(providerProps.config);
+  const client = new UnleashClient(givenConfig);
 
   render(
     <FlagProvider unleashClient={client} startClient={false}>
diff --git a/testSetup.js b/testSetup.js
@@ -1,9 +1,6 @@
 import { expect, afterEach } from 'vitest';
 import { cleanup } from '@testing-library/react';
-import matchers from '@testing-library/jest-dom/matchers';
-
-// extends Vitest's expect method with methods from react-testing-library
-expect.extend(matchers);
+import '@testing-library/jest-dom/vitest'
 
 // runs a cleanup after each test case (e.g. clearing jsdom)
 afterEach(() => {
diff --git a/yarn.lock b/yarn.lock
