Handling testing/adding a mockfile

[Meegan]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I'm attempting to run test via jest in my app, and I'm getting this:

TypeError: Cannot read properties of undefined (reading 'configure')

when attempting the below:

GiphySDK.configure({ apiKey: ${mySdkKey} });

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.

[Meegan]

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.

[ALexanderLonsky]

Hey @Meegan,

To mock the Giphy module:

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:

/**
 * 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.

[Meegan]

This resolved my issue, thanks! Can/should we either:

1. update this task
2. create a new task

And I can make a PR to:

1. add a default mockfile in the repo
2. add this in the documentation

Let me know -- otherwise I can mark this soled and close the issue.

[ALexanderLonsky]

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.

[ALexanderLonsky]

@Meegan,
I've updated the documentation.

[Meegan]

@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.