React-native/Enzyme：nativeエレメントに "unknown props"がスローされました

Question

Jest & Enzyme in React Nativeを使用して、コンポーネントの動作と内部機能を完全にテストします。 浅いテストは大丈夫そうですが、それをマウント使用時には、ちょうどここに私の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" 
    } 
} 

今のところ私のテストはかなり簡単です。 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'); 
}); 

私は浅いレンダリングをしましたが、私は自分のシーンをプロバイダにラップする必要があるため、不可能です。

Answer 1

divにプロバイダをラップする必要がある場合があります。 "...コンポーネントは単一のルート要素を返す必要があります..." - https://facebook.github.io/react/docs/components-and-props.html