React-native/Enzyme：mount 在原生元素上抛出“未知道具”

Question

我正在使用 React Native 中的 Jest & Enzyme 编写测试，以全面测试我的组件行为和内部功能。 浅层测试似乎还可以，但是在使用 mount 时它只是抛出

这是我的 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');
});

我会对此进行浅层渲染，但由于我需要将场景包装到 Provider 中，所以这是不可能的。

Answer 1

您可能需要将 Provider 包装在一个 div 中。 “...组件必须返回单个根元素...” -https://facebook.github.io/react/docs/components-and-props.html