# React UIKit: Best Practices for Testing Components with SendbirdProvider

**URL:** <https://community.sendbird.com/t/react-uikit-best-practices-for-testing-components-with-sendbirdprovider/11171>\
**Category:** Sendbird Chat UIKit\
**Tags:** javascript, uikit, question\
**Created:** [August 7, 2025, 5:06am UTC](https://community.sendbird.com/t/react-uikit-best-practices-for-testing-components-with-sendbirdprovider/11171 "2025-08-07T05:06:04Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![pitchayut.ni.nn](https://avatars.discourse-cdn.com/v4/letter/p/b5e925/32.png) [@pitchayut.ni.nn](https://community.sendbird.com/u/pitchayut.ni.nn)\
**Post date:** [August 7, 2025, 5:06am UTC](https://community.sendbird.com/t/react-uikit-best-practices-for-testing-components-with-sendbirdprovider/11171/1 "2025-08-07T05:06:04Z")

</div>

I’m working on a React component that uses SendbirdProvider, and I’m now looking into how to automate testing for it. I plan to use Storybook’s play function for the tests.

To avoid hitting the actual Sendbird backend during tests, I want to mock the component in a way that returns predefined data every time the test runs. I’m currently considering two approaches:

1. **Wrap the component with a mocked version of SendbirdProvider.** I’m not sure if Sendbird offers a built-in mock provider for this.

2. **Mock the useSendbirdStateContext hook** to return relevant mocked functions and data.

I’d appreciate any advice on which of these approaches is better—or if there’s a more effective alternative.