Skip to content

Commit

Permalink
Merge pull request #186 from Giphy/doc/jest-mocking
Browse files Browse the repository at this point in the history
docs: how to mock the Giphy dependency in Jest
  • Loading branch information
ALexanderLonsky authored Jul 11, 2024
2 parents 734201d + 5426f23 commit cbf79f2
Showing 2 changed files with 94 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -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)

93 changes: 93 additions & 0 deletions docs/testing-jest.md
Original file line number Diff line number Diff line change
@@ -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);
});
```

0 comments on commit cbf79f2

Please sign in to comment.