React-native/Enzyme : mount throws "unknown props" on native elements - reactjs

Question

I'm writing tests using Jest & Enzyme in React Native to fully test my components behaviors and inner functions.
Shallow test seems ok but when using mount it just throws
Here's my package.json.
{
"name": "Despirithium",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"buildandroid": "react-native bundle --platform=android --entry-file=index.android.js --bundle-output='android/app/src/main/assets/index.android.bundle?dev=false",
"test": "jest --watch"
},
"dependencies": {
"axios": "^0.15.*",
"dpath": "^2.0.2",
"evosphere-router": "0.1.9",
"immutable": "^3.8.1",
"intl": "^1.2.5",
"lodash": "^4.16.4",
"node-uuid": "^1.4.7",
"normalizr": "^2.2.1",
"react": "15.3.2",
"react-native": "0.36.0",
"react-native-drawer": "^2.3.0",
"react-native-i18n": "^0.1.1",
"react-native-image-picker": "^0.22.12",
"react-native-router-flux": "^3.35.0",
"react-native-tabs": "^1.0.9",
"react-redux": "^4.4.5",
"redux": "^3.6.0",
"redux-immutable": "^3.0.8",
"redux-logger": "^2.7.0",
"redux-thunk": "^2.1.0",
"string-template": "^1.0.0",
"tcomb-form-native": "^0.6.1"
},
"devDependencies": {
"babel-core": "^6.14.0",
"babel-jest": "^17.0.2",
"babel-plugin-transform-object-rest-spread": "^6.8.0",
"babel-plugin-transform-react-jsx": "^6.8.0",
"babel-plugin-transform-remove-console": "^6.8.0",
"babel-polyfill": "^6.13.0",
"babel-preset-latest": "6.14.0",
"babel-preset-react-native": "^1.9.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"babel-register": "^6.14.0",
"enzyme": "^2.6.0",
"enzyme-to-json": "^1.3.0",
"faussaire": "^0.2.2",
"faussaire-util": "^0.1.0",
"jest": "^17.0.3",
"jest-enzyme": "^2.0.0",
"jest-react-native": "^17.0.3",
"react-addons-test-utils": "15.3.2",
"react-dom": "15.3.2",
"react-native-fs": "^2.0.1-rc.2",
"react-native-mock": "^0.2.7",
"react-test-renderer": "15.3.2",
"updtr": "^0.2.1"
},
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
"setupTestFrameworkScriptFile": "node_modules/jest-enzyme/lib/index.js",
"testEnvironment": "jsdom",
"moduleFileExtensions": [
"js",
"json",
"es6"
],
"preset": "jest-react-native"
}
}
For now my test is pretty simple.
global.Promise = require.requireActual('promise');
import 'react-native';
import React from 'react';
import { mount, shallow } from 'enzyme';
import { mountToJson } from 'enzyme-to-json';
import { LoginScene } from '../../../../../../src/bundles/application/ui/scene/public/LoginScene';
import configureStore from '../../../../../../src/configureStore';
import { Provider } from 'react-redux';
import { getState, getInstance } from '../../../../../../src/testing/enzymeUtils';
test('LoginScene', async () => {
const store = await configureStore();
let loginScene;
const wrapper = mount(
<Provider store={store}>
<LoginScene/>
</Provider>
);
expect(mountToJson(wrapper)).toMatchSnapshot();
loginScene = wrapper.find(LoginScene);
getInstance(loginScene)._handleFieldChange('username', 'despirithium');
getInstance(loginScene)._handleFieldChange('password', 'azerty');
expect(getState(wrapper.find(LoginScene)).username).toBe('despirithium');
expect(getState(wrapper.find(LoginScene)).password).toBe('azerty');
});
I would have shallow rendered this but since I need to wrap my scene into the Provider it's not possible.

Answer 1

You may need to wrap Provider in a div. "...Components must return a single root element..." -https://facebook.github.io/react/docs/components-and-props.html