Closed Meegan closed 1 month ago
Okay, so I realized I WASN'T on the latest version of @giphy/react-native-sdk, after updating I'm encountering a new error:
Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RTNGiphySDKModule' could not be found. Verify that a module by this name is registered in the native binary.
Seems to be coming in from the root import statement for the Giphy components.
Hey @Meegan,
To mock the Giphy module:
jest.config.js
in the root folder:
module.exports = {
preset: 'react-native',
moduleNameMapper: {
'^@giphy/react-native-sdk$': '<rootDir>/__mocks__/giphy-react-native-sdk.js',
},
};
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:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
*/
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:
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);
});
Please let me know if that works for you.
This resolved my issue, thanks! Can/should we either:
And I can make a PR to:
Let me know -- otherwise I can mark this soled and close the issue.
Hey @Meegan, Thank you for the suggestion. I don't see any sense in adding testing mocks to the SDK, as it is more appropriate for the app side where tests need to be implemented. Different apps have different environments. However, it may be beneficial to add a documentation section with guides on how to mock Giphy module. So, feel free to open a PR.
@Meegan, I've updated the documentation.
@ALexanderLonsky ah, thank you! Sorry, busy few weeks for me 😄
As a final note, I also had to mock a configure method on GiphyDialog, but that might be specific to my setup.
Duplicates
Latest version
Summary 💡
I'm attempting to run test via jest in my app, and I'm getting this:
when attempting the below:
I've tried adding the @giphy library to transformIgnorePatterns in my jestfile, but there's no difference there.
Is there a mockfile I can load into the library? If not, what would be required to set that up? (Admittedly, I'm somewhat new at working with these tests.)
Motivation 🔦
This is preventing me from my
does it render
test for my app.