fixes

code/lib/preview-api/package.json

@@ -80,6 +80,9 @@
     "ts-dedent": "^2.0.0",
     "util-deprecate": "^1.0.2"
   },
+  "devDependencies": {
+    "@jest/globals": "^26.6.2"
+  },
   "publishConfig": {
     "access": "public"
   },

code/lib/preview-api/src/modules/client-api/ClientApi.test.ts

@@ -18,7 +18,7 @@ describe('ClientApi', () => {
       };
       clientApi.storyStore = store as any;
 
-      let disposeCallback: () => void;
+      let disposeCallback: () => void = () => {};
       const module1 = {
         id: 'file1',
         hot: {

code/lib/preview-api/src/modules/core-client/executeLoadable.ts

@@ -36,7 +36,7 @@ export function executeLoadable(loadable: Loadable) {
             typeof req.resolve === 'function' ? req.resolve(filename) : filename,
             fileExports
           );
-        } catch (error) {
+        } catch (error: any) {
           const errorString =
             error.message && error.stack ? `${error.message}\n ${error.stack}` : error.toString();
           logger.error(`Unexpected error while loading ${filename}: ${errorString}`);
@@ -92,7 +92,12 @@ export function executeLoadableForChanges(loadable: Loadable, m?: NodeModule) {
   const removed = new Map<Path, Store_ModuleExports>();
   Array.from(lastExportsMap.keys())
     .filter((fileName) => !exportsMap.has(fileName))
-    .forEach((fileName) => removed.set(fileName, lastExportsMap.get(fileName)));
+    .forEach((fileName) => {
+      const value = lastExportsMap.get(fileName);
+      if (value) {
+        removed.set(fileName, value);
+      }
+    });
 
   // Save the value for the dispose() call above
   lastExportsMap = exportsMap;

code/lib/preview-api/src/modules/core-client/start.test.ts

@@ -15,7 +15,6 @@ import {
 import { start as realStart } from './start';
 
 jest.mock('global', () => ({
-  // @ts-expect-error (jest is not happy with this)
   ...jest.requireActual('global'),
   history: { replaceState: jest.fn() },
   document: {
@@ -122,7 +121,7 @@ describe('start', () => {
 
       await waitForRender();
 
-      expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1])
+      expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1])
         .toMatchInlineSnapshot(`
         Object {
           "entries": Object {
@@ -277,9 +276,7 @@ describe('start', () => {
       await waitForRender();
       expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-a--default');
 
-      const storiesOfData = mockChannel.emit.mock.calls.find(
+      const storiesOfData = mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1];
-        (call: any[]) => call[0] === SET_INDEX
-      )[1];
       expect(Object.values(storiesOfData.entries).map((s: any) => s.parameters.fileName)).toEqual([
         'file1',
         'file1-2',
@@ -410,7 +407,7 @@ describe('start', () => {
         .add('new', jest.fn());
 
       await waitForEvents([SET_INDEX]);
-      expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1])
+      expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1])
         .toMatchInlineSnapshot(`
         Object {
           "entries": Object {
@@ -481,7 +478,7 @@ describe('start', () => {
       });
 
       await waitForEvents([SET_INDEX]);
-      expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1])
+      expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1])
         .toMatchInlineSnapshot(`
         Object {
           "entries": Object {
@@ -533,7 +530,7 @@ describe('start', () => {
       disposeCallback();
 
       await waitForEvents([SET_INDEX]);
-      expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1])
+      expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1])
         .toMatchInlineSnapshot(`
         Object {
           "entries": Object {
@@ -584,7 +581,7 @@ describe('start', () => {
       configure('test', () => [componentCExports]);
 
       await waitForRender();
-      expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1])
+      expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1])
         .toMatchInlineSnapshot(`
         Object {
           "entries": Object {
@@ -705,7 +702,7 @@ describe('start', () => {
       configure('test', () => [{ ...componentCExports, StoryThree: jest.fn() }], module as any);
 
       await waitForEvents([SET_INDEX]);
-      expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1])
+      expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1])
         .toMatchInlineSnapshot(`
         Object {
           "entries": Object {
@@ -796,7 +793,7 @@ describe('start', () => {
       );
 
       await waitForEvents([SET_INDEX]);
-      expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1])
+      expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1])
         .toMatchInlineSnapshot(`
         Object {
           "entries": Object {
@@ -868,7 +865,7 @@ describe('start', () => {
       configure('test', () => [componentCExports], module as any);
 
       await waitForEvents([SET_INDEX]);
-      expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1])
+      expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1])
         .toMatchInlineSnapshot(`
         Object {
           "entries": Object {
@@ -968,7 +965,7 @@ describe('start', () => {
         );
 
         await waitForEvents([SET_INDEX]);
-        expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1])
+        expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1])
           .toMatchInlineSnapshot(`
           Object {
             "entries": Object {
@@ -1014,7 +1011,7 @@ describe('start', () => {
       });
 
       await waitForRender();
-      expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1])
+      expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1])
         .toMatchInlineSnapshot(`
         Object {
           "entries": Object {
@@ -1157,7 +1154,7 @@ describe('start', () => {
         });
 
         await waitForRender();
-        expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1])
+        expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1])
           .toMatchInlineSnapshot(`
           Object {
             "entries": Object {
@@ -1311,7 +1308,7 @@ describe('start', () => {
       configure('test', () => [componentDExports]);
 
       await waitForEvents([SET_INDEX]);
-      expect(mockChannel.emit.mock.calls.find((call: [string, any]) => call[0] === SET_INDEX)[1])
+      expect(mockChannel.emit.mock.calls.find((call) => call[0] === SET_INDEX)?.[1])
         .toMatchInlineSnapshot(`
         Object {
           "entries": Object {

code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts

@@ -29,7 +29,6 @@ jest.mock('./WebView');
 
 const { window, document } = global;
 jest.mock('global', () => ({
-  // @ts-expect-error (Converted from ts-ignore)
   ...jest.requireActual('global'),
   history: { replaceState: jest.fn() },
   document: {

code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts

@@ -10,7 +10,11 @@ import {
   STORY_THREW_EXCEPTION,
 } from '@storybook/core-events';
 
-import type { Store_StoryIndex, Store_TeardownRenderToDOM } from '@storybook/types';
+import type {
+  Store_ModuleImportFn,
+  Store_StoryIndex,
+  Store_TeardownRenderToDOM,
+} from '@storybook/types';
 import type { RenderPhase } from './render/StoryRender';
 
 export const componentOneExports = {
@@ -44,7 +48,7 @@ export const extraComponentOneExports = {
   },
   e: {},
 };
-export const importFn = jest.fn(
+export const importFn: Store_ModuleImportFn = jest.fn(
   async (path: string) =>
     ({
       './src/ComponentOne.stories.js': componentOneExports,
@@ -52,7 +56,7 @@ export const importFn = jest.fn(
       './src/Introduction.mdx': standaloneDocsExports,
       './src/ExtraComponentOne.stories.js': extraComponentOneExports,
     }[path])
-);
+) as any as Store_ModuleImportFn;
 
 export const docsRenderer = {
   render: jest.fn().mockImplementation((context, parameters, element, cb) => cb()),

code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts

@@ -29,9 +29,13 @@ import {
 } from '@storybook/core-events';
 import { logger } from '@storybook/client-logger';
 import { addons, mockChannel as createMockChannel } from '@storybook/addons';
-import type { AnyFramework } from '@storybook/types';
+import type {
+  AnyFramework,
+  Store_ModuleImportFn,
+  Store_WebProjectAnnotations,
+} from '@storybook/types';
 import { mocked } from 'ts-jest/utils';
-import type { ModuleImportFn, WebProjectAnnotations } from '../../store';
+// import type { ModuleImportFn, WebProjectAnnotations } from '../../store';
 
 import { PreviewWeb } from './PreviewWeb';
 import {
@@ -57,7 +61,7 @@ const { history, document } = global;
 
 const mockStoryIndex = jest.fn(() => storyIndex);
 
-let mockFetchResult;
+let mockFetchResult: any;
 jest.mock('global', () => ({
   ...(mockJest.requireActual('global') as any),
   history: { replaceState: mockJest.fn() },
@@ -109,8 +113,8 @@ async function createAndRenderPreview({
   importFn: inputImportFn = importFn,
   getProjectAnnotations: inputGetProjectAnnotations = getProjectAnnotations,
 }: {
-  importFn?: ModuleImportFn;
+  importFn?: Store_ModuleImportFn;
-  getProjectAnnotations?: () => WebProjectAnnotations<AnyFramework>;
+  getProjectAnnotations?: () => Store_WebProjectAnnotations<AnyFramework>;
 } = {}) {
   const preview = new PreviewWeb();
   await preview.initialize({
@@ -685,7 +689,7 @@ describe('PreviewWeb', () => {
 
         const context = docsRenderer.render.mock.calls[0][0];
 
-        expect(context.componentStories().map((s) => s.id)).toEqual([
+        expect(context.componentStories().map((s: any) => s.id)).toEqual([
           'component-one--a',
           'component-one--b',
           'component-one--e',
@@ -1141,6 +1145,7 @@ describe('PreviewWeb', () => {
       const preview = await createAndRenderPreview();
       await waitForRender();
 
+      // @ts-expect-error (jest mock)
       importFn.mockClear();
       await preview.onPreloadStories({ ids: ['component-two--c'] });
       expect(importFn).toHaveBeenCalledWith('./src/ComponentTwo.stories.js');
@@ -1151,6 +1156,7 @@ describe('PreviewWeb', () => {
       const preview = await createAndRenderPreview();
       await waitForRender();
 
+      // @ts-expect-error (jest mock)
       importFn.mockClear();
       await preview.onPreloadStories({ ids: ['component-one--docs'] });
       expect(importFn).toHaveBeenCalledWith('./src/ComponentOne.stories.js');
@@ -1161,6 +1167,7 @@ describe('PreviewWeb', () => {
       const preview = await createAndRenderPreview();
       await waitForRender();
 
+      // @ts-expect-error (jest mock)
       importFn.mockClear();
       await preview.onPreloadStories({ ids: ['introduction--docs'] });
       expect(importFn).toHaveBeenCalledWith('./src/Introduction.mdx');
@@ -1170,6 +1177,7 @@ describe('PreviewWeb', () => {
       const preview = await createAndRenderPreview();
       await waitForRender();
 
+      // @ts-expect-error (jest mock)
       importFn.mockClear();
       await preview.onPreloadStories({ ids: ['introduction--docs'] });
       expect(importFn).toHaveBeenCalledWith('./src/ComponentTwo.stories.js');
@@ -1607,14 +1615,18 @@ describe('PreviewWeb', () => {
           const [gate, openGate] = createGate();
           const [importedGate, openImportedGate] = createGate();
           importFn
+            // @ts-expect-error (jest mock)
             .mockImplementationOnce(async (...args) => {
               await gate;
+              // @ts-expect-error (jest mock)
               return importFn(...args);
             })
+            // @ts-expect-error (jest mock)
             .mockImplementationOnce(async (...args) => {
               // The second time we `import()` we open the "imported" gate
               openImportedGate();
               await gate;
+              // @ts-expect-error (jest mock)
               return importFn(...args);
             });
 
@@ -1652,14 +1664,18 @@ describe('PreviewWeb', () => {
           const [gate, openGate] = createGate();
           const [importedGate, openImportedGate] = createGate();
           importFn
+            // @ts-expect-error (jest mock)
             .mockImplementationOnce(async (...args) => {
               await gate;
+              // @ts-expect-error (jest mock)
               return importFn(...args);
             })
+            // @ts-expect-error (jest mock)
             .mockImplementationOnce(async (...args) => {
               // The second time we `import()` we open the "imported" gate
               openImportedGate();
               await gate;
+              // @ts-expect-error (jest mock)
               return importFn(...args);
             });
 
@@ -1696,14 +1712,18 @@ describe('PreviewWeb', () => {
           const [gate, openGate] = createGate();
           const [importedGate, openImportedGate] = createGate();
           importFn
+            // @ts-expect-error (jest mock)
             .mockImplementationOnce(async (...args) => {
               await gate;
+              // @ts-expect-error (jest mock)
               return importFn(...args);
             })
+            // @ts-expect-error (jest mock)
             .mockImplementationOnce(async (...args) => {
               // The second time we `import()` we open the "imported" gate
               openImportedGate();
               await gate;
+              // @ts-expect-error (jest mock)
               return importFn(...args);
             });
 
@@ -3072,7 +3092,7 @@ describe('PreviewWeb', () => {
     describe('when a standalone docs file changes', () => {
       const newStandaloneDocsExports = { default: jest.fn() };
 
-      const newImportFn = jest.fn(async (path) => {
+      const newImportFn = jest.fn(async (path: string) => {
         return path === './src/Introduction.mdx' ? newStandaloneDocsExports : importFn(path);
       });
 
@@ -3180,7 +3200,7 @@ describe('PreviewWeb', () => {
       expect(mockChannel.emit).toHaveBeenCalledWith(CONFIG_ERROR, err);
     });
 
-    const newGlobalDecorator = jest.fn((s) => s());
+    const newGlobalDecorator = jest.fn((s: any) => s());
     const newGetProjectAnnotations = () => {
       return {
         ...projectAnnotations,
@@ -3388,7 +3408,7 @@ describe('PreviewWeb', () => {
     it('waits for stories to be cached', async () => {
       const [gate, openGate] = createGate();
 
-      const gatedImportFn = async (path) => {
+      const gatedImportFn = async (path: string) => {
         await gate;
         return importFn(path);
       };

code/lib/preview-api/src/modules/preview-web/UrlStore.test.ts

@@ -20,7 +20,7 @@ describe('UrlStore', () => {
       expect(pathToId('/story/story--id')).toEqual('story--id');
     });
     it('should error on invalid ids', () => {
-      [null, '', '/whatever/story/story--id'].forEach((path) => {
+      [null, '', '/whatever/story/story--id'].forEach((path: any) => {
         expect(() => pathToId(path)).toThrow(/Invalid/);
       });
     });

code/lib/preview-api/src/modules/store/StoryIndexStore.test.ts

@@ -32,11 +32,11 @@ const storyIndex: Store_StoryIndex = {
   },
 };
 
-const makeStoryIndex = (titlesAndNames) => {
+const makeStoryIndex = (titlesAndNames: any) => {
   return {
     v: 4,
     entries: Object.fromEntries(
-      titlesAndNames.map(([title, name]) => {
+      titlesAndNames.map(([title, name]: any[]) => {
         const id = `${title}--${name}`.replace('/', '-');
         return [
           id,

code/lib/preview-api/src/modules/store/StoryStore.test.ts

@@ -1,12 +1,11 @@
-import type { AnyFramework, ProjectAnnotations } from '@storybook/types';
+import type { AnyFramework, ProjectAnnotations, Store_StoryIndex } from '@storybook/types';
 import global from 'global';
 import { expect } from '@jest/globals';
 
 import { prepareStory } from './csf/prepareStory';
 import { processCSFFile } from './csf/processCSFFile';
 import { StoryStore } from './StoryStore';
-import type { StoryIndex } from './types';
+import type { HooksContext } from '../..';
-import type { HooksContext } from './hooks';
 
 // Spy on prepareStory/processCSFFile
 jest.mock('./csf/prepareStory', () => ({
@@ -43,7 +42,7 @@ const projectAnnotations: ProjectAnnotations<any> = {
   render: jest.fn(),
 };
 
-const storyIndex: StoryIndex = {
+const storyIndex: Store_StoryIndex = {
   v: 4,
   entries: {
     'component-one--a': {
@@ -631,10 +630,11 @@ describe('StoryStore', () => {
     });
 
     it('does not include (modern) docs entries ever', async () => {
-      const docsOnlyStoryIndex: StoryIndex = {
+      const docsOnlyStoryIndex: Store_StoryIndex = {
         v: 4,
         entries: {
           ...storyIndex.entries,
+          // @ts-expect-error (not strict)
           'introduction--docs': {
             type: 'docs',
             id: 'introduction--docs',

code/lib/preview-api/src/modules/store/autoTitle.test.ts

@@ -5,7 +5,7 @@ import { userOrAutoTitleFromSpecifier as userOrAuto } from './autoTitle';
 
 expect.addSnapshotSerializer({
   print: (val: any) => val,
-  test: (val) => true,
+  test: (val: any) => true,
 });
 
 // Make these two the same so `normalizeStoriesEntry` doesn't change anything

code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts

@@ -162,9 +162,9 @@ describe('composeConfigs', () => {
     const fn = jest.fn();
 
     const { runStep } = composeConfigs([
-      { runStep: (label, play, context) => fn(`${label}1`, play(context)) },
+      { runStep: (label: any, play: any, context: any) => fn(`${label}1`, play(context)) },
-      { runStep: (label, play, context) => fn(`${label}2`, play(context)) },
+      { runStep: (label: any, play: any, context: any) => fn(`${label}2`, play(context)) },
-      { runStep: (label, play, context) => fn(`${label}3`, play(context)) },
+      { runStep: (label: any, play: any, context: any) => fn(`${label}3`, play(context)) },
     ]);
 
     // @ts-expect-error We don't care about the context value here

code/lib/preview-api/src/modules/store/csf/testing-utils/index.test.ts

@@ -31,6 +31,7 @@ describe('composeStory', () => {
 
   test('should throw an error if Story is undefined', () => {
     expect(() => {
+      // @ts-expect-error (this is supposed to fail)
       composeStory(undefined, meta);
     }).toThrow();
   });

code/lib/preview-api/src/modules/store/decorators.test.ts

@@ -18,9 +18,9 @@ describe('client-api.decorators', () => {
   it('calls decorators in out to in order', () => {
     const order: number[] = [];
     const decorators = [
-      (s) => order.push(1) && s(),
+      (s: any) => order.push(1) && s(),
-      (s) => order.push(2) && s(),
+      (s: any) => order.push(2) && s(),
-      (s) => order.push(3) && s(),
+      (s: any) => order.push(3) && s(),
     ];
     const decorated = defaultDecorateStory(() => order.push(4), decorators);
 
@@ -32,9 +32,9 @@ describe('client-api.decorators', () => {
   it('passes context through to sub decorators', () => {
     const contexts: StoryContext[] = [];
     const decorators = [
-      (s, c) => contexts.push(c) && s({ args: { k: 1 } }),
+      (s: any, c: any) => contexts.push(c) && s({ args: { k: 1 } }),
-      (s, c) => contexts.push(c) && s({ args: { k: 2 } }),
+      (s: any, c: any) => contexts.push(c) && s({ args: { k: 2 } }),
-      (s, c) => contexts.push(c) && s({ args: { k: 3 } }),
+      (s: any, c: any) => contexts.push(c) && s({ args: { k: 3 } }),
     ];
     const decorated = defaultDecorateStory((c) => contexts.push(c), decorators);
 
@@ -46,8 +46,8 @@ describe('client-api.decorators', () => {
   it('passes context through to sub decorators additively', () => {
     const contexts: StoryContext[] = [];
     const decorators = [
-      (s, c) => contexts.push(c) && s({ args: { a: 1 } }),
+      (s: any, c: any) => contexts.push(c) && s({ args: { a: 1 } }),
-      (s, c) => contexts.push(c) && s({ globals: { g: 2 } }),
+      (s: any, c: any) => contexts.push(c) && s({ globals: { g: 2 } }),
     ];
     const decorated = defaultDecorateStory((c) => contexts.push(c), decorators);
 
@@ -61,9 +61,9 @@ describe('client-api.decorators', () => {
   });
 
   it('does not recreate decorated story functions each time', () => {
-    const decoratedStories = [];
+    const decoratedStories: any[] = [];
     const decorators = [
-      (s, c) => {
+      (s: any, c: any) => {
         decoratedStories.push = s;
         return s();
       },
@@ -80,12 +80,12 @@ describe('client-api.decorators', () => {
   // the same story twice at the same time.
   it('does not interleave contexts if two decorated stories are call simultaneously', async () => {
     const contexts: StoryContext[] = [];
-    let resolve;
+    let resolve: any;
     const fence = new Promise((r) => {
       resolve = r;
     });
     const decorators = [
-      async (s, c) => {
+      async (s: any, c: any) => {
         // The fence here simulates async-ness in react rendering an element (`<S />` doesn't run `S()` straight away)
         await fence;
         s();
@@ -107,7 +107,7 @@ describe('client-api.decorators', () => {
   it('DOES NOT merge core metadata or pass through core metadata keys in context', () => {
     const contexts: StoryContext[] = [];
     const decorators = [
-      (s, c) =>
+      (s: any, c: any) =>
         contexts.push(c) &&
         s({ parameters: { c: 'd' }, id: 'notId', kind: 'notKind', name: 'notName' }),
     ];

code/lib/preview-api/src/modules/store/hooks.test.ts

@@ -31,16 +31,16 @@ jest.mock('@storybook/client-logger', () => ({
 }));
 
 const SOME_EVENT = 'someEvent';
-let mockChannel;
+let mockChannel: any;
-let hooks;
+let hooks: any;
-let onSomeEvent;
+let onSomeEvent: any;
-let removeSomeEventListener;
+let removeSomeEventListener: any;
 beforeEach(() => {
   onSomeEvent = jest.fn();
   removeSomeEventListener = jest.fn();
   mockChannel = {
     emit: jest.fn(),
-    on(event, callback) {
+    on(event: any, callback: any) {
       switch (event) {
         case STORY_RENDERED:
           callback();
@@ -51,7 +51,7 @@ beforeEach(() => {
         default:
       }
     },
-    removeListener(event, callback) {
+    removeListener(event: any, callback: any) {
       if (event === SOME_EVENT) {
         removeSomeEventListener(event, callback);
       }
@@ -63,7 +63,7 @@ beforeEach(() => {
 
 const decorateStory = applyHooks(defaultDecorateStory);
 
-const run = (storyFn, decorators: DecoratorFunction[] = [], context = {}) =>
+const run = (storyFn: any, decorators: DecoratorFunction[] = [], context = {}) =>
   decorateStory(storyFn, decorators)({ ...context, hooks } as StoryContext);
 
 describe('Preview hooks', () => {
@@ -116,7 +116,7 @@ describe('Preview hooks', () => {
     });
     it("doesn't retrigger the effect from decorator if story has changed", () => {
       const effect = jest.fn();
-      const decorator = (storyFn) => {
+      const decorator = (storyFn: any) => {
         useEffect(effect, []);
         return storyFn();
       };
@@ -126,7 +126,7 @@ describe('Preview hooks', () => {
     });
     it("doesn't retrigger the effect from decorator if story has changed and story call comes before useEffect", () => {
       const effect = jest.fn();
-      const decorator = (storyFn) => {
+      const decorator = (storyFn: any) => {
         const story = storyFn();
         useEffect(effect, []);
         return story;
@@ -140,7 +140,7 @@ describe('Preview hooks', () => {
       const story = () => {
         useEffect(effect, []);
       };
-      const decorator = (storyFn) => {
+      const decorator = (storyFn: any) => {
         storyFn();
         return storyFn();
       };
@@ -348,7 +348,7 @@ describe('Preview hooks', () => {
   });
   describe('useRef', () => {
     it('attaches initial value', () => {
-      let ref;
+      let ref: any;
       const storyFn = () => {
         ref = useRef('foo');
       };
@@ -430,8 +430,8 @@ describe('Preview hooks', () => {
       expect(state).toBe(3);
     });
     it('performs asynchronous state updates', () => {
-      let state;
+      let state: any;
-      let setState;
+      let setState: any;
       const storyFn = jest.fn(() => {
         [state, setState] = useState('foo');
       });
@@ -484,8 +484,8 @@ describe('Preview hooks', () => {
       expect(state).toBe(3);
     });
     it('performs asynchronous state updates', () => {
-      let state;
+      let state: any;
-      let dispatch;
+      let dispatch: any;
       const storyFn = jest.fn(() => {
         [state, dispatch] = useReducer((prevState, action) => {
           switch (action) {

code/lib/preview-api/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "strict": true
+    "strict": true,
+    "skipLibCheck": true
   },
   "include": ["src/**/*"],
   "exclude": []

code/ui/manager/src/components/preview/tools/addons.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconButton, Icons } from '@storybook/components';
 import { Consumer, type Combo } from '@storybook/api';
-import type { Addon } from '@storybook/preview-api';
+import type { Addon } from '@storybook/addons';
 
 const menuMapper = ({ api, state }: Combo) => ({
   isVisible: state.layout.showPanel,

code/ui/manager/src/components/preview/tools/copy.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import copy from 'copy-to-clipboard';
 import { getStoryHref, IconButton, Icons } from '@storybook/components';
 import { Consumer, type Combo } from '@storybook/api';
-import type { Addon } from '@storybook/preview-api';
+import type { Addon } from '@storybook/addons';
 
 const { PREVIEW_URL, document } = global;
 

code/ui/manager/src/components/preview/tools/eject.tsx

@@ -2,7 +2,7 @@ import global from 'global';
 import React from 'react';
 import { getStoryHref, IconButton, Icons } from '@storybook/components';
 import { Consumer, type Combo } from '@storybook/api';
-import type { Addon } from '@storybook/preview-api';
+import type { Addon } from '@storybook/addons';
 
 const { PREVIEW_URL } = global;
 

code/ui/manager/src/components/preview/tools/menu.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconButton, Icons, Separator } from '@storybook/components';
 import { Consumer, type Combo } from '@storybook/api';
-import type { Addon } from '@storybook/preview-api';
+import type { Addon } from '@storybook/addons';
 
 const menuMapper = ({ api, state }: Combo) => ({
   isVisible: state.layout.showNav,

code/ui/manager/src/components/preview/tools/remount.tsx

@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react';
 import React, { useState } from 'react';
 import { IconButton, Icons } from '@storybook/components';
 import { Consumer, type Combo } from '@storybook/api';
-import type { Addon } from '@storybook/preview-api';
+import type { Addon } from '@storybook/addons';
 import { styled } from '@storybook/theming';
 import { FORCE_REMOUNT } from '@storybook/core-events';
 

code/ui/manager/src/components/preview/tools/zoom.tsx

@@ -2,7 +2,7 @@ import type { SyntheticEvent, MouseEventHandler } from 'react';
 import React, { Component, useCallback } from 'react';
 
 import { Icons, IconButton, Separator } from '@storybook/components';
-import type { Addon } from '@storybook/preview-api';
+import type { Addon } from '@storybook/addons';
 
 const initialZoom = 1 as const;
 

code/yarn.lock

@@ -7237,6 +7237,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/preview-api@workspace:lib/preview-api"
   dependencies:
+    "@jest/globals": ^26.6.2
     "@storybook/addons": 7.0.0-alpha.47
     "@storybook/channels": next
     "@storybook/client-logger": 7.0.0-alpha.47