Test Methods

/** Standard snapshot test method */
declare const snapshot: StoryshotsTestMethod;

import initStoryshots, { snapshot } from "@storybook/addon-storyshots";

initStoryshots({
  test: snapshot
});

/**
 * Creates snapshot test with custom options
 * @param options - Rendering options or function returning options
 * @returns Configured snapshot test method
 */
function snapshotWithOptions(options?: SnapshotsWithOptionsArgType): SnapshotsWithOptionsReturnType;

type SnapshotsWithOptionsArgType = Pick<StoryshotsOptions, "renderer" | "serializer"> | Function;

type SnapshotsWithOptionsReturnType = (
  options: Pick<TestMethodOptions, "story" | "context" | "renderTree" | "snapshotFileName">
) => any;

import initStoryshots, { snapshotWithOptions } from "@storybook/addon-storyshots";

// Static options
initStoryshots({
  test: snapshotWithOptions({
    renderer: mount,
    createNodeMock: (element) => {
      if (element.type === "textarea") {
        return document.createElement("textarea");
      }
    }
  })
});

// Dynamic options based on story
initStoryshots({
  test: snapshotWithOptions((story) => ({
    createNodeMock: (element) => {
      if (story.name === "with-ref") {
        return document.createElement(element.type);
      }
      return null;
    }
  }))
});

/**
 * Creates separate snapshot file for each story
 * @param options - Rendering options or function returning options
 * @returns Multi-file snapshot test method
 */
function multiSnapshotWithOptions(options?: SnapshotsWithOptionsArgType): StoryshotsTestMethod;

import initStoryshots, { multiSnapshotWithOptions } from "@storybook/addon-storyshots";

// Basic multi-file snapshots
initStoryshots({
  test: multiSnapshotWithOptions(),
  integrityOptions: { cwd: __dirname }
});

// With custom options
initStoryshots({
  test: multiSnapshotWithOptions({
    renderer: mount
  })
});

// jest.config.js
module.exports = {
  transform: {
    "^.+\\.stories\\.jsx?$": "@storybook/addon-storyshots/injectFileName",
    "^.+\\.jsx?$": "babel-jest",
  },
};

/**
 * Shallow rendering snapshot test
 * @param args - Test method arguments
 */
declare const shallowSnapshot: StoryshotsTestMethod;

import initStoryshots, { shallowSnapshot } from "@storybook/addon-storyshots";

initStoryshots({
  test: shallowSnapshot
});

/** Render-only test without snapshots (smoke testing) */
declare const renderOnly: StoryshotsTestMethod;

import initStoryshots, { renderOnly } from "@storybook/addon-storyshots";

// Smoke test - just ensure components render without errors
initStoryshots({
  test: renderOnly
});

/**
 * Custom rendering with options
 * @param options - Rendering options
 * @returns Render-only test method
 */
function renderWithOptions(options?: any): StoryshotsTestMethod;

import initStoryshots, { renderWithOptions } from "@storybook/addon-storyshots";
import { mount } from "enzyme";

// Custom renderer for smoke testing
initStoryshots({
  test: renderWithOptions({
    renderer: mount
  })
});

// With React Testing Library
import { render } from "@testing-library/react";

initStoryshots({
  test: renderWithOptions({
    renderer: render
  })
});

interface StoryshotsTestMethod {
  /** Main test function */
  (args: TestMethodOptions): any;
  
  /** Run before all tests in the suite */
  beforeAll?: () => void | Promise<void>;
  
  /** Run before each individual test */
  beforeEach?: () => void | Promise<void>;
  
  /** Run after all tests in the suite */
  afterAll?: () => void | Promise<void>;
  
  /** Run after each individual test */
  afterEach?: () => void | Promise<void>;
}

interface TestMethodOptions {
  /** Story object with render method */
  story: any;
  
  /** Story context with metadata */
  context: any;
  
  /** Tree renderer function */
  renderTree: RenderTree;
  
  /** Shallow renderer function */
  renderShallowTree: RenderTree;
  
  /** File converter instance */
  stories2snapsConverter: Stories2SnapsConverter;
  
  /** Optional snapshot filename for multi-snapshot */
  snapshotFileName?: string;
  
  /** Additional options */
  options: any;
  
  /** Async completion callback (when asyncJest: true) */
  done?: () => void;
}

type RenderTree = (story: any, context: any, options?: any) => any;

import initStoryshots from "@storybook/addon-storyshots";
import { mount } from "enzyme";
import toJson from "enzyme-to-json";

const customTest = ({ story, context }) => {
  const storyElement = story.render();
  const tree = mount(storyElement);
  
  // Custom assertions
  expect(tree.find("[data-testid]")).toHaveLength.greaterThan(0);
  expect(toJson(tree)).toMatchSnapshot();
  
  // Cleanup
  tree.unmount();
};

// Add lifecycle hooks
customTest.beforeEach = () => {
  console.log("Starting test...");
};

customTest.afterEach = () => {
  console.log("Test completed");
};

initStoryshots({
  test: customTest
});

// Enable async testing
asyncJest?: boolean;

import initStoryshots from "@storybook/addon-storyshots";

initStoryshots({
  asyncJest: true,
  test: ({ story, context, done }) => {
    const storyElement = story.render();
    const tree = mount(storyElement);
    
    // Wait for async operations
    setTimeout(() => {
      expect(toJson(tree.update())).toMatchSnapshot();
      done(); // Required when asyncJest: true
    }, 100);
  }
});