Testing Utilities

import {
  createTestFeatureProvider,
  withFeatures,
  setTestFlag,
  resetTestProvider,
} from 'vue-feature-toggles/testing'

The vue-feature-toggles/testing entry point is excluded from the production bundle.

Mount with flags

import { mount } from '@vue/test-utils'
import { withFeatures } from 'vue-feature-toggles/testing'

const wrapper = mount(
  MyComponent,
  withFeatures({
    newDashboard: true,
    betaSearch: false,
  }),
)

Full provider access in tests

import { createTestFeatureProvider } from 'vue-feature-toggles/testing'

const { install, provider } = createTestFeatureProvider({ newDashboard: true })

const wrapper = mount(MyComponent, {
  global: { plugins: [{ install }] },
})

provider.setFlag('newDashboard', false)
await nextTick()

Change flags mid-test

import { setTestFlag } from 'vue-feature-toggles/testing'

it('hides the component when flag is off', async () => {
  const wrapper = mount(MyComponent, withFeatures({ betaSearch: true }))
  expect(wrapper.find('[data-testid="beta"]').exists()).toBe(true)

  await setTestFlag('betaSearch', false) // awaits nextTick automatically
  expect(wrapper.find('[data-testid="beta"]').exists()).toBe(false)
})

setTestFlag() operates on the most recently created test provider — if a test creates more than one provider concurrently (e.g. two createTestFeatureProvider()/withFeatures() calls running in parallel), it always targets the last one created, not necessarily the one under test.

Cleanup

import { resetTestProvider } from 'vue-feature-toggles/testing'

afterEach(() => resetTestProvider())