• Home
  • Integrations
  • SDKs
  • Guides
  • API docs
No results for ""
EXPAND ALL

EDIT ON GITHUB

Unit testing with Jest

Read time: 1 minute
Last edited: May 20, 2022

Overview

This guide explains how to unit test LaunchDarkly React applications with Jest. jest-launchdarkly-mock allows you to simulate, or "mock," flag evaluations locally. This lets you verify testing behavior happens correctly, while also letting you use the React SDK in your React application.

React SDK only

The jest-launchdarkly-mock package is only compatible with the React SDK.

Getting started

First, install jest-launchdarkly-mock with a package manager:

yarn add -D jest-launchdarkly-mock

Then, configure Jest:

module.exports = {
setupFiles: ['jest-launchdarkly-mock'],
}

Usage

The jest-launchdarkly-mock package contains three exports to help unit test LaunchDarkly in your app:

  • mockFlags, to mock flags at the start of each test case
  • resetLDMocks, to reset
  • ldClientMock, to mock the ldClient in the React SDK

To learn more, read the Readme.

import { mockFlags, resetLDMocks, ldClientMock } from 'jest-launchdarkly-mock'

Mocking flags

Use the mockFlags function to mock flags. Pass an LDFlagSet containing the flag keys and values you want to mock. You can use camelCase, snake_case, kebab-case, or unchanged flag keys when mocking flags.

Here's how:

it('should click correctly', () => {
mockFlags({
camelFlag: true,
snake_flag: 'rabbit',
'kebab-flag': true,
'original-unchanged_flag': 0,
})
// ...act & assert
})

Resetting mocks

In the setup step of your test suite, use resetLDMocks() to reset all mocks and ensure each test runs with a clean slate. This function resets all mocked flags and ldClientMock.

Here's how:

describe('button', () => {
beforeEach(() => {
resetLDMocks()
})
// ...tests
})

Testing ldClient

You can use ldClientMock to write tests involving the ldClient. This is a Jest mock of the ldClient. All functions of ldClientMock are also Jest mocks.

For example, if you have a button that calls ldClient.identify on click, then you can write an assertion using ldClientMock.

Here's how:

it('should identify on click', () => {
// ...arrange
// act
const { getByTestId } = render(<Button />)
fireEvent.click(getByTestId('test-button'))
// assert: identify gets called
expect(ldClientMock.identify).toBeCalledWith({ key: 'aa0ceb' })
})

Full example

Putting it all together, the following is a complete example of the snippets above:

import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import { mockFlags, ldClientMock, resetLDMocks } from 'jest-launchdarkly-mock'
describe('button', () => {
beforeEach(() => {
// resets flags and ldClientMock before each test
resetLDMocks()
})
test('flag on', () => {
// mocking a camelCased flag
mockFlags({ devTestFlag: true })
const { getByTestId } = render(<Button />)
expect(getByTestId('test-button')).toBeTruthy()
})
test('identify', () => {
// mocking a kebab-cased-flag
mockFlags({ 'dev-test-flag': true })
const { getByTestId } = render(<Button />)
fireEvent.click(getByTestId('test-button'))
// asserting ldClient.identify gets called
expect(ldClientMock.identify).toBeCalledWith({ key: 'aa0ceb' })
})
})
Want to know more? Start a trial.

Your 14-day trial begins as soon as you sign up. Learn to use LaunchDarkly with the app's built-in tutorial. You'll discover how easy it is to manage the whole feature lifecycle from concept to launch to control.

Want to try it out? Start a trial.