How to hoist a jest dependency mock over actual dependency? - react-native

Question

I'm testing a react-native Component which imports a Class LanguageStore. Currently the test fails because the component is instantiating this class which calls a private setter that is undefined in the scope of the test:
FAIL src\modules\languageProvider\__tests__\LanguageProvider-test.js
● renders correctly
TypeError: _this.strings.setLanguage is not a function
at LanguageStore.setLanguage (src\modules\languageProvider\LanguageStore.js:25:15)
at new LanguageProvider (src\modules\languageProvider\LanguageProvider.js:30:16)
Question:
How to hoist a jest dependency mock over actual dependency?
In order to resolve this I called a jest.mock according my to this answer How can I mock an ES6 module import using Jest?. But I get the same error as before because the test is calling the implementation of LanguageStore rather than the mock I created below - _this.strings.setLanguage is not a function:
import { View } from 'react-native';
import React from 'react';
import { shallow } from 'enzyme';
import renderer from 'react-test-renderer';
import connect from '../connect.js';
import LanguageProvider from '../LanguageProvider';
import LanguageStore from '../LanguageStore';
it('renders correctly', () => {
const TestComponent = connect(Test);
const strings = { test: 'Test' };
const language = "en"
const stringsMock = {
setLanguage: jest.fn()
};
const mockSetLanguage = jest.fn();
jest.mock('../LanguageStore', () => () => ({
language: language,
strings: stringsMock,
setLanguage: mockSetLanguage,
}));
const wrapper = shallow(<LanguageProvider strings={strings} language="en"><Test /></LanguageProvider>);
expect(wrapper.get(0)).toMatchSnapshot();
});
class Test extends React.Component {
constructor(props) {
super(props);
}
render() {
return <View />;
}
}
This is a link to the test and related components and classes under test:
https://github.com/BrianJVarley/react-native-prototyping/blob/i18nProvider-feature/src/modules/languageProvider/tests/LanguageProvider-test.js

Answer 1

Calling jest.mock within a test doesn't work.
You'll need to move your mock outside of the test and make sure your factory function doesn't have any external dependencies.
Something like this:
import { View } from 'react-native';
import React from 'react';
import { shallow } from 'enzyme';
import connect from '../connect.js';
import LanguageProvider from '../LanguageProvider';
import LanguageStore from '../LanguageStore';
jest.mock('../LanguageStore', () => {
const language = "en"
const stringsMock = {
setLanguage: jest.fn()
};
const mockSetLanguage = jest.fn();
return () => ({
language,
strings: stringsMock,
setLanguage: mockSetLanguage,
})
});
it('renders correctly', () => {
const TestComponent = connect(Test);
const strings = { test: 'Test' };
const wrapper = shallow(<LanguageProvider strings={strings} language="en"><Test /></LanguageProvider>);
expect(wrapper.get(0)).toMatchSnapshot();
});
class Test extends React.Component {
constructor(props) {
super(props);
}
render() {
return <View />;
}
}