From 5426f2391c7f0be11a205e12a084c4e92f4ba1a8 Mon Sep 17 00:00:00 2001
From: Alex Lonsky <alexander.lonsky@gmail.com>
Date: Thu, 11 Jul 2024 14:11:08 +0300
Subject: [PATCH] docs: how to mock the Giphy dependency in Jest

re #184
---
 README.md            |  1 +
 docs/testing-jest.md | 93 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 94 insertions(+)
 create mode 100644 docs/testing-jest.md

diff --git a/README.md b/README.md
index 7788d02..1a0233c 100644
--- a/README.md
+++ b/README.md
@@ -24,6 +24,7 @@ Facebook, Slack, Instagram, and more – with just a few lines of code.
 - [GIPHY Clips: GIFs with Sound](docs/clips.md)
 - [GIPHY Animated Text Creation](docs/animated.md)
 - [Example App](https://github.com/Giphy/giphy-react-native-sdk/tree/main/example)
+- [How to mock the Giphy dependency in Jest](docs/testing-jest.md)
 
 ### [API Reference](docs/api.md)
 
diff --git a/docs/testing-jest.md b/docs/testing-jest.md
new file mode 100644
index 0000000..3b0de1f
--- /dev/null
+++ b/docs/testing-jest.md
@@ -0,0 +1,93 @@
+# This section describes how to mock the Giphy dependency in Jest.
+
+1. Add `jest.config.js` in the root folder:
+
+```
+module.exports = {
+  preset: 'react-native',
+  moduleNameMapper: {
+    '^@giphy/react-native-sdk$': '<rootDir>/__mocks__/giphy-react-native-sdk.js',
+  },
+};
+```
+
+2. Alternatively, you can add this directly to the `package.json` right after `devDependencies` section:
+```
+"jest": {
+  "preset": "react-native",    
+  "moduleNameMapper": {
+    "^@giphy/react-native-sdk$": "<rootDir>/__mocks__/giphy-react-native-sdk.js"
+  }
+}
+```
+Then
+`__mocks__/react-native-giphy-sdk.js`:
+```
+const GiphyDialog = {
+  show: jest.fn(),
+};  
+
+const GiphySDK = {
+  configure: jest.fn(),
+};
+
+export { GiphyDialog, GiphySDK };
+```
+
+`App.tsx`:
+```typescript
+import React from 'react';
+import type {PropsWithChildren} from 'react';
+import {
+  SafeAreaView,
+  useColorScheme,
+  Button
+} from 'react-native';
+
+import {
+  Colors,
+  DebugInstructions,
+  Header,
+  LearnMoreLinks,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+
+import { GiphyContent, GiphyDialog, GiphySDK } from '@giphy/react-native-sdk';
+
+GiphySDK.configure({ apiKey: '******************' })
+
+function App(): React.JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView>
+      <Button title="Show Giphy Dialog" onPress={() => GiphyDialog.show()} />
+    </SafeAreaView>
+  );
+}
+
+export default App;
+```
+
+`__tests__/App.test.tsx`:
+```typescript
+import 'react-native';
+import React from 'react';
+import App from '../App';
+import { it, expect, jest } from '@jest/globals';
+import { render, fireEvent } from '@testing-library/react-native';
+
+it('shows Giphy dialog on button press', () => {
+  const { getByText } = render(<App />);
+  const button = getByText('Show Giphy Dialog');
+
+  fireEvent.press(button);
+
+  const { GiphyDialog } = require('@giphy/react-native-sdk');
+  expect(GiphyDialog.show).toHaveBeenCalledTimes(1);
+});
+```
\ No newline at end of file