{"id":14249,"library":"vitest-launchdarkly-mock","title":"Vitest LaunchDarkly Mock","description":"This package, `vitest-launchdarkly-mock`, provides essential utilities for unit testing React components that integrate with LaunchDarkly feature flags within a Vitest testing environment. Currently at version 1.2.3, it offers a robust solution for isolating UI components by mocking the `launchdarkly-react-client-sdk`'s `useFlags` hook and the underlying `ldClient`. The library's release cadence is generally stable, receiving updates primarily to align with new major versions of Vitest or the LaunchDarkly React SDK, rather than frequent, independent releases. Its key differentiator is its direct adaptation from `jest-launchdarkly-mock`, specifically tailored for the Vitest ecosystem, allowing developers to leverage a familiar mocking pattern when transitioning or developing Vitest-based tests. It enables developers to precisely control feature flag states for individual tests and assert interactions with the LaunchDarkly client, ensuring reliable and repeatable test outcomes without external dependencies on the LaunchDarkly service itself. The package is focused on the React SDK integration, making it a specialized tool for React applications.","status":"active","version":"1.2.3","language":"javascript","source_language":"en","source_url":"https://github.com/bohdanbirdie/vitest-launchdarkly-mock","tags":["javascript","vitest","launchdarkly","mock","typescript"],"install":[{"cmd":"npm install vitest-launchdarkly-mock","lang":"bash","label":"npm"},{"cmd":"yarn add vitest-launchdarkly-mock","lang":"bash","label":"yarn"},{"cmd":"pnpm add vitest-launchdarkly-mock","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for mocking LaunchDarkly React client SDK behavior.","package":"launchdarkly-react-client-sdk","optional":false},{"reason":"Required peer dependency for testing React components.","package":"react","optional":false},{"reason":"Required peer dependency for rendering React components in tests.","package":"react-dom","optional":false},{"reason":"Required peer dependency for the testing framework.","package":"vitest","optional":false}],"imports":[{"note":"This package is primarily ESM-first. For CommonJS environments, ensure proper transpilation or use dynamic imports.","wrong":"const { mockFlags } = require('vitest-launchdarkly-mock')","symbol":"mockFlags","correct":"import { mockFlags } from 'vitest-launchdarkly-mock'"},{"note":"Provides a Vitest mock of the LaunchDarkly client, allowing assertion of client method calls.","wrong":"const { ldClientMock } = require('vitest-launchdarkly-mock')","symbol":"ldClientMock","correct":"import { ldClientMock } from 'vitest-launchdarkly-mock'"},{"note":"Essential for clearing mock states between tests to prevent test pollution; typically called in `beforeEach`.","wrong":"const { resetLDMocks } = require('vitest-launchdarkly-mock')","symbol":"resetLDMocks","correct":"import { resetLDMocks } from 'vitest-launchdarkly-mock'"}],"quickstart":{"code":"import { render, fireEvent } from '@testing-library/react';\nimport { describe, beforeEach, test, expect } from 'vitest';\nimport { mockFlags, ldClientMock, resetLDMocks } from 'vitest-launchdarkly-mock';\n\n// A dummy React component for demonstration, in a real app this would use useFlags()\nconst Button = () => {\n  // Assume 'devTestFlag' determines some UI aspect, mocked by mockFlags\n  // Simplified for this quickstart; actual implementation would use useFlags()\n  const isFeatureEnabled = true; // Value controlled by mockFlags in test\n  return (\n    <button data-testid=\"test-button\" onClick={() => ldClientMock.identify({ key: 'aa0ceb', name: 'Test User' })}> \n      {isFeatureEnabled ? 'Feature On' : 'Feature Off'}\n    </button>\n  );\n};\n\ndescribe('Button component with LaunchDarkly mocks', () => {\n  beforeEach(() => {\n    // Reset mocks before each test to ensure test isolation.\n    resetLDMocks();\n  });\n\n  test('should display button when devTestFlag is enabled', () => {\n    // Arrange: Mock 'devTestFlag' to be true.\n    mockFlags({ devTestFlag: true });\n\n    // Act: Render the component under test.\n    const { getByTestId } = render(<Button />);\n\n    // Assert: Verify the button is rendered and visible.\n    expect(getByTestId('test-button')).toBeInTheDocument();\n  });\n\n  test('should call ldClientMock.identify when button is clicked', () => {\n    // Arrange: Mock the flag state and render the component.\n    mockFlags({ 'dev-test-flag': true });\n\n    // Act: Render the button and simulate a user click.\n    const { getByTestId } = render(<Button />);\n    fireEvent.click(getByTestId('test-button'));\n\n    // Assert: Verify that ldClientMock.identify was called with the correct arguments.\n    expect(ldClientMock.identify).toBeCalledWith({ key: 'aa0ceb', name: 'Test User' });\n  });\n});\n","lang":"typescript","description":"This quickstart demonstrates how to mock LaunchDarkly flags and client interactions for a React component using `vitest-launchdarkly-mock`, ensuring isolated and reliable unit tests."},"warnings":[{"fix":"Ensure your project uses `launchdarkly-react-client-sdk` for client-side React applications. This mock is not compatible with other LaunchDarkly SDKs (e.g., Node.js server-side SDKs).","message":"This package is exclusively designed for use with the LaunchDarkly React Client SDK (`launchdarkly-react-client-sdk`).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add `'./node_modules/vitest-launchdarkly-mock/dist/index.js'` to the `test.setupFiles` array in your `vite.config.ts` to ensure global mocks are loaded before your tests run.","message":"Configuration in `vite.config.ts` `setupFiles` is mandatory for this package to initialize its global mocks correctly.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always call `resetLDMocks()` within a `beforeEach` hook inside your test suites. This ensures a clean and isolated mocking state for each individual test case.","message":"Mocks are global and will persist their state between tests unless explicitly reset, which can lead to flaky or unpredictable test results.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.2.3':32 'adapt':92 'align':69 'allow':104 'applic':169 'assert':133 'base':118 'cadenc':61 'client':48,138 'compon':17,41 'control':125 'current':29 'depend':147 'develop':105,115,122 'differenti':88 'direct':91 'ecosystem':103 'enabl':121 'ensur':139 'environ':28 'essenti':11 'extern':146 'familiar':109 'featur':22,126 'flag':23,127 'focus':156 'frequent':83 'general':63 'hook':52 'independ':84 'individu':130 'integr':19,161 'interact':134 'isol':39 'javascript':170 'jest':95 'jest-launchdarkly-mock':94 'key':87 'launchdark':2,8,21,46,78,96,137,150,172 'launchdarkly-react-client-sdk':45 'ldclient':56 'leverag':107 'librari':58 'major':72 'make':162 'mock':3,9,43,97,110,173 'new':71 'offer':34 'outcom':144 'packag':5,154 'pattern':111 'precis':124 'primarili':67 'provid':10 'rather':81 'react':16,47,79,159,168 'receiv':65 'releas':60,85 'reliabl':140 'repeat':142 'robust':36 'sdk':49,80,160 'servic':151 'solut':37 'special':165 'specif':98 'stabl':64 'state':128 'tailor':99 'test':15,27,119,131,143 'tool':166 'transit':113 'typescript':174 'ui':40 'under':55 'unit':14 'updat':66 'useflag':51 'util':12 'version':31,73 'vitest':1,7,26,75,102,117,171 'vitest-bas':116 'vitest-launchdarkly-mock':6 'within':24 'without':145","created_at":"2026-04-20T01:58:43.482574+00:00","updated_at":"2026-04-20T01:58:43.482574+00:00","problems":[{"fix":"Verify that `'./node_modules/vitest-launchdarkly-mock/dist/index.js'` is included in the `test.setupFiles` array within your `vite.config.ts`.","cause":"The Vitest setup file for `vitest-launchdarkly-mock` was not correctly loaded or configured.","error":"ReferenceError: mockFlags is not defined"},{"fix":"Ensure that `vitest-launchdarkly-mock` is correctly configured in Vitest's `setupFiles` and that `resetLDMocks()` is called within a `beforeEach` block to re-initialize mocks for each test.","cause":"The `ldClientMock` object or its methods were accessed before `vitest-launchdarkly-mock` was properly initialized, or after it was reset without subsequent re-initialization.","error":"TypeError: Cannot read properties of undefined (reading 'identify')"},{"fix":"While `vitest-launchdarkly-mock` should handle most `useFlags` mocks, ensure that `vitest-launchdarkly-mock` is correctly set up via `setupFiles`. If the issue persists with complex components, you might need to mock `LaunchDarklyProvider` explicitly in your test renderer or check for other context dependencies.","cause":"Your React component attempts to use LaunchDarkly hooks (e.g., `useFlags`) without being rendered within a `LaunchDarklyProvider` context, even when `vitest-launchdarkly-mock` is active.","error":"Invariant Violation: You must use the LaunchDarklyProvider"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://www.npmjs.com/package/vitest-launchdarkly-mock","github":"https://github.com/bohdanbirdie/vitest-launchdarkly-mock","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vitest-launchdarkly-mock","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}