Jest runner use "ios" as default OS (Plaform.OS) for react-native tests.
How to do test in jest that have platform dependent code. An further more, how to mock static constant imported in a module.
Here is the code:
utils.ts:
import { Platform } from "react-native";
export const isIOS = Platform.OS === "ios"; // note constant, not function
items.ts:
import { isIOS } from "#my/utils";
export const items = [{
id: 1,
name: isIOS ? "Apple" : "Android"
}]
test:
import { items } from "./items";
// not working because Platform.OS is used statically during import statement
it("should be android", () => {
Platform.OS = "android"; // too late...
expect(items[0].name).toBe("Android"); // fail: Apple
}
it("should be ios", () => {
Platform.OS = "ios";
expect(items[0].name).toBe("Apple"); // works due to default platform value in Jest
}
I saw some workaround using jest.resetModules() & require inside test/it block (and change Plaform.OS before require) but does exist a more simple way to achieve that ?
In your test file
import { Platform } from 'react-native'
jest.doMock('react-native/Libraries/Utilities/Platform.android.js', () => ({
OS: 'android',
select: jest.fn(),
}))
jest.doMock('react-native/Libraries/Utilities/Platform.ios.js', () => ({
OS: 'android',
select: jest.fn(),
}))
describe('Platform', () => {
it('Should be android', () => {
expect(Platform.OS).toEqual('android')
})
it('Should be ios', () => {
Platform.OS = 'ios'
expect(Platform.OS).toEqual('ios')
})
it('Should be android', () => {
Platform.OS = 'android'
expect(Platform.OS).toEqual('android')
})
})
I am trying to setup my react-native test environment with react-native-testing-library and Jest. My react-native application uses react-native-encrypted-storage. When I run my first sample test (code below) it fails saying RNEcryptedStorage is undefined.
import React from "react";
import "react-native";
// Note: test renderer must be required after react-native.
import renderer from "react-test-renderer";
import App from "../App";
it("renders correctly", () => {
console.log("Rendering");
renderer.create(<App />);
});
Full error:
RNEncryptedStorage is undefined
at Object. (node_modules/react-native-encrypted-storage/lib/commonjs/EncryptedStorage.ts:7:9)
at Object. (node_modules/react-native-encrypted-storage/lib/commonjs/index.ts:1:1)
This is first time I am setting up my test environment so not sure where do I start for resolving this issue.
The above will work, but if you mock other aspects of react-native it could create a problem with the other mocks. If you want to mock RNEncryptedStorage on its own, you could try a slight variation of the above solution:
__mocks__/react-native-encrypted-storage/index.js
const RNEncryptedStorage = {
setItem: jest.fn(() => Promise.resolve()),
getItem: jest.fn(() => Promise.resolve('{ "foo": 1 }')),
removeItem: jest.fn(() => Promise.resolve()),
clear: jest.fn(() => Promise.resolve()),
};
export default RNEncryptedStorage;
You can mock the RNEncryptedStorage native module during your tests by adding a react-native mock to your __mocks__ folder.
// tests/__mocks__/react-native.js
module.exports = {
NativeModules: {
RNEncryptedStorage: {
setItem: jest.fn(() => Promise.resolve()),
getItem: jest.fn(() => Promise.resolve('{ "foo": 1 }')),
removeItem: jest.fn(() => Promise.resolve()),
clear: jest.fn(() => Promise.resolve())
}
}
}
I want something like the following (that actually works...):
import { NativeModules } from 'react-native';
import PushNotifications from '../../app/platform/PushNotificationSupport';
const mockRNA = jest.requireMock('react-native');
jest.mock('react-native', () => {
return {
default: mockRNA.default,
NativeModules: {
...mockRNA.NativeModules,
NativePushNotifications: {
setTokenHandler: jest.fn(),
},
},
};
});
Of course, the above code doesn't actually work. I essentially want to build on top of the existing react-native mock.
You can try to mock NativeModules directly
jest.mock('NativeModules', () => ({
NativePushNotifications: {
setTokenHandler: jest.fn(),
},
...
}));
I have some problems testing a Component inside a Create React App that returns a Query Component, I'm using jest and enzyme for testing. The error that I get is Invariant Violation: Unable to find node on an unmounted component.. Any ideas with what I'm doing wrong? What I'm trying to get is to test that the query component will return an array of components based on the data received from the server.
I tried using the methods posted in this medium article, but I can't get it to work at all.
// The component
export class MyWrapper extends React.Component {
render() {
return (
<List divided verticalAlign="middle" >
<Query query={query} >
{({ data, loading, error, refetch }) => {
if (loading) return <Loader />;
if (error) return <ErrorMessage />;
// set refetch as a class property
this.refetch = refetch;
return data.response
.map(el => (
<MyComponent
el={el}
/>
));
}}
</Query>
</List>
);
}
}
export default compose(
...//
)(MyWrapper);
// The test file
import React from "react";
import { MockedProvider } from "react-apollo/test-utils";
import query from "path/to/query";
import { MyWrapper } from "../MyWrapper";
import { props } from "./props";
const mocks = {
request: {
query,
},
result: {
data: {
response: [
// data
]
}
}
};
describe("<MyWrapper />", () => {
describe("rendering", () => {
it("renders <MyComponent />'s", async () => {
const wrapper = mount(
<MockedProvider mocks={mocks} removeTypename>
<MyWrapper {...props} />
</MockedProvider>
);
await new Promise(resolve => setTimeout(() => resolve(), 1000));
wrapper.update();
console.log(wrapper.debug());
});
});
});
This is the code snippet I tried to reproduce:
const wait = require('waait');
it('should render dog', async () => {
const dogMock = {
request: {
query: GET_DOG_QUERY,
variables: { name: 'Buck' },
},
result: {
data: { dog: { id: 1, name: 'Buck', breed: 'poodle' } },
},
};
const component = renderer.create(
<MockedProvider mocks={[dogMock]} addTypename={false}>
<Dog name="Buck" />
</MockedProvider>,
);
await wait(0); // wait for response
const p = component.root.findByType('p');
expect(p.children).toContain('Buck is a poodle');
});
After Googling to solve this for myself I found this.
According to this Git Issue the problem is in enzyme-adapter-react-16. EthanJStark said that updating to enzyme version 1.5.0 corrected it. I can confirm that the error stopped.
tldr;package.json – "enzyme-adapter-react-16": "^1.1",
+ "enzyme-adapter-react-16": "^1.5.0",
I was getting Invariant Violation: Unable to find node on an unmounted component too with TypeScript and Next.js in the mix.
After creating an isolated project which worked, I knew it had to be my codebase.
The stack trace seemed to stem at invariant (node_modules/react-dom/cjs/react-dom.development.js:55:15).
So in my case, upgrading from "react-dom": "16.5.2" to "react-dom": "16.7.0" fixed the issue for me, along with re-creating my yarn.lock file.
Some of the code I am trying to test detects the platform, using, e.g.:
import { Platform } from 'react-native';
...
if (Platform.OS === 'android') {
...
} else {
...
}
Is there a sensible way to mock this with Jest and/or something else, so I can test both branches in one test run?
Or is the smart way to decouple it and put the platform into, e.g., a context variable? Although it always feels restructuring code to make it easier to test is something of a cheat.
This worked for me (Jest 21.2.1, Enzyme 3.2.0):
jest.mock('Platform', () => {
const Platform = require.requireActual('Platform');
Platform.OS = 'android';
return Platform;
});
Put it either at the top of your test, or in a beforeAll for example.
For everyone looking for this, what it helped me was the following:
jest.mock('react-native/Libraries/Utilities/Platform', () => ({
OS: 'android', // or 'ios'
select: () => null
}));
The way that I achieved mocking setting the platform was just set it directly in the tests:
it('should only run for Android', () => {
Platform.OS = 'android'; // or 'ios'
// For my use case this module was failing on iOS
NativeModules.MyAndroidOnlyModule = {
fetch: jest.fn(
(url, event) => Promise.resolve(JSON.stringify(event.body))
),
};
return myParentFunction().then(() => {
expect(NativeModules.MyAndroidOnlyModule.fetch.mock.calls.length).toBe(1);
expect(fetch.mock.calls.length).toBe(0);
});
});
This would setup the platform to only run on Android during tests to make sure that my function was calling only specific functions. My function that was wrapped in platform dependent compilation looked like:
export default function myParentFunction() {
if (Platform.OS === 'ios') {
return fetch();
}
return NativeModules.MyAndroidOnlyModule.fetch();
}
I would suggest just creating two different tests one with the platform set to iOS and the other to Android since ideally a function should only have one responsibility. However, I'm sure you can use this to run the first test, dynamically set the platform and run test number two all in one function.
I implemented a small mock that allows you to change Platform during tests in the same test file.
Add this to your jest setup file
jest.mock('react-native/Libraries/Utilities/Platform', () => {
let platform = {
OS: 'ios',
}
const select = jest.fn().mockImplementation((obj) => {
const value = obj[platform.OS]
return !value ? obj.default : value
})
platform.select = select
return platform
});
Then you can easily change Platform in your test. If you are using Platform.select it will also work as expected!
import { Platform } from 'react-native'
describe('When Android', () => {
it('should ...', () => {
Platform.OS = 'android'
...
})
})
describe('When iOS', () => {
it('should ...', () => {
Platform.OS = 'ios'
...
})
})
React Native 0.61 update
Though the accepted solution works for versions of React Native 0.60 and below, React Native 0.61 has dropped Haste support and this gives an error.
I was able to mock platform detection following the implementation described in this blog post.
Practically, according to the React team, we now have to mock the react-native interface. So, you can create a react-native.js file inside the tests/__mocks__ folder and add this code to mock Platform:
import * as ReactNative from "react-native";
export const Platform = {
...ReactNative.Platform,
OS: "ios",
Version: 123,
isTesting: true,
select: objs => objs[Platform.OS]
};
export default Object.setPrototypeOf(
{
Platform
},
ReactNative
);
With this implementation, we can now simply overwrite the OS before running the test like:
Platform.OS = 'android'
Since the other answers will not work if you want to mock different OSs in the same test suite and in one test run, here's another way. Instead of using Platform.OS directly in your code, define a helper function somewhere and use that to get references to the OS in your components:
in 'helpers.js':
export function getOS() {
return Platform.OS;
}
in your component:
import * as helpers from './helpers';
render() {
if (helpers.getOS() === 'android') {// do something}
}
This function can then be mocked it in your tests, e.g.
import * as helpers from './helpers';
// ...
it('does something on Android', () => {
jest.spyOn(helpers, 'getOS').mockImplementation(() => 'android');
// ...
}
it('does something else on iOS', () => {
jest.spyOn(helpers, 'getOS').mockImplementation(() => 'ios');
// ...
}
Credit for the idea goes to this GitHub issue comment.
This works for me...
jest.mock('react-native/Libraries/Utilities/Platform', () => {
const Platform = require.requireActual(
'react-native/Libraries/Utilities/Platform'
)
Platform.OS = 'android'
return Platform
})
this is the mock you need:
const mockPlatform = OS => {
jest.resetModules();
jest.doMock("Platform", () => ({ OS, select: objs => objs[OS] }));
};
with it you can do the following:
it("my test on Android", () => {
mockPlatform("android");
});
it("my test on iOS", () => {
mockPlatform("ios");
});
That way you can have tests for both platforms
I'm using the solution from this github issue https://github.com/facebook/jest/issues/1370#issuecomment-352597475
I moved the jest config from package.json to separate files.
So far everything seems to work great, including:
a) the right file is imported according to the platform. For example on ios: .ios.tsx, then .native.tsx then .tsx
b) PLATFORM.IOS returns true when running test-ios, no need to mock anything
// package.json
"scripts": {
"test": "cross-env NODE_ENV=test jest --config config/jest.desktop.json",
"test-ios": "cross-env NODE_ENV=test jest --config config/jest.ios.json",
"test-android": "cross-env NODE_ENV=test jest --config config/jest.android.json"
}
// config/jest.web.json
{
...
}
// config/jest.ios.json
{
...
"preset": "react-native",
"haste": {
"defaultPlatform": "ios",
"platforms": [
"android",
"ios",
"native"
],
"providesModuleNodeModules": [
"react-native"
]
},
}
// config/jest.android.json
{
...
"preset": "react-native",
"haste": {
"defaultPlatform": "android",
"platforms": [
"android",
"ios",
"native"
],
"providesModuleNodeModules": [
"react-native"
]
},
}
use jest.doMock and jest.resetModules
jest.resetModules()
jest.doMock('react-native', () => ({ Platform: { OS: 'android' }}))
Maybe the problem in the "import" method, check this:
const isAndroid = require('app/helpers/is_android');
//import isAndroid from 'app/helpers/is_android'
with "import" this will not work, need to use "require".
beforeEach(() => {
jest.resetModules();
});
it("should be true when Android", () => {
jest.mock('Platform', () => {
return { OS: 'android' };
});
expect(isAndroid).toBe(true);
});
import React from "react";
import renderer from "react-test-renderer";
import SmartText from "../SmartText";
describe("markdown smart text component", () => {
beforeEach(() => {
jest.resetModules();
});
it("renders with props on ios", () => {
jest.mock("Platform", () => {
return { OS: "ios" };
});
expect(
renderer.create(<SmartText title="code ios" code />).toJSON()
).toMatchSnapshot();
});
it("renders with props on android", () => {
jest.mock("Platform", () => {
return { OS: "android" };
});
expect(
renderer.create(<SmartText title="code android" code />).toJSON()
).toMatchSnapshot();
});
});
for newer version
"react-native": "0.62.2"
"enzyme": "^3.11.0"
"jest": "24.5.0"
Put it at the top of your test
Object.defineProperty(Platform, 'OS', { get: jest.fn(() => 'ios') })
jest: ^26.5.3
See bottom of this article
import { Platform } from 'react-native';
describe('Android', () => {
it('renders Element if Android', () => {
Platform.OS = 'android';
renderIfAndroid();
expect(wrapper.find(Element)).exists()).toBe(true);
});
});
describe('IOS', () => {
it('renders Element if IOS', () => {
Platform.OS = 'ios';
renderIfIOS();
expect(wrapper.find(Element)).exists()).toBe(true);
});
});
To change Platform only for a specific test, the following can be used:
test('Platform should be Android', () => {
jest.doMock('react-native/Libraries/Utilities/Platform', () => ({
OS: 'android',
}));
expect(Platform.OS).toBe('android');
// restore the previous value 'ios' for Platform.OS
jest.dontMock('react-native/Libraries/Utilities/Platform');
});
You can mock whatever you want from React-Native like this:
describe('notifications actions tests', () => {
let Platform;
beforeEach(() => {
jest.mock('react-native', () => ({
Platform: {
...
}));
Platform = require('react-native').Platform; // incase u would like to refer to Platform in your tests
});
If anyone is looking out to mock Platform.select. The below code can fix your issue.
const mockedData = 'MOCKED-DATA'
jest.mock('react-native', () => ({
Platform: {
select: jest.fn(() => {
return { mockedData } // Your Mocked Value
}),
}
}));
And To mock both OS and Platform. Please refer below code.
jest.mock('Platform', () => ({
OS: 'android', // or 'ios'
select: () => 'mocked-value'
}));
You have to mock the module and import it into your test. Then you can use mockImplementation to set the it to either android or ios
import reactNative from 'react-native';
jest.mock('react-native', () = > jest.fn();
it('is android', () => {
reactNative.mockImplementation(()=>({Platform:{OS: 'android'}}))
//test the android case
})
it('is android', ()=>{
reactNative.mockImplementation(()=>({Platform: { OS: 'io' }}))
//test the ios case
})
OS can be set directly for each test
test('android', () => {
Platform.OS = 'android'
const component = renderer.create(<Component />).toJSON()
expect(component).toMatchSnapshot()
})
test('ios', () => {
Platform.OS = 'ios'
const component = renderer.create(<Component />).toJSON()
expect(component).toMatchSnapshot()
})