Material-ui의 RadioButton과 함께 Enzyme의 마운트를 사용할 때 오류가 발생합니다

Question

mocha에서 engyme의 마운트를 사용하여 material-ui의 RadioButton을 테스트하려고 시도하지만 오류가 발생합니다.

이 문제를 방지 할 수있는 방법이 있습니까?

코드 : package.json

 

    { 
     "name": "testradiobutton", 
     "version": "1.0.0", 
     "description": "", 
     "main": "index.js", 
     "scripts": { 
      "test": "NODE_ENV=nodes mocha --compilers js:babel-register --require babel-polyfill ./nodes/test.setup.js --recursive $(find nodes -name '*.spec.js')" 
     }, 
     "author": "", 
     "license": "ISC", 
     "devDependencies": { 
      "babel-core": "^6.26.0", 
      "babel-loader": "^7.1.2", 
      "babel-polyfill": "^6.26.0", 
      "babel-preset-es2015": "^6.24.1", 
      "babel-preset-es2016": "^6.24.1", 
      "babel-preset-power-assert": "^1.0.0", 
      "babel-preset-react": "^6.24.1", 
      "babel-preset-stage-0": "^6.24.1", 
      "babel-register": "^6.26.0", 
      "enzyme": "^2.9.1", 
      "jsdom": "^11.3.0", 
      "mocha": "^3.5.3", 
      "react-test-renderer": "^15.6.2", 
      "power-assert": "^1.4.4", 
      "webpack": "^3.5.6", 
      "webpack-init": "^0.1.2" 
     }, 
     "dependencies": { 
      "flexboxgrid": "^6.3.1", 
      "material-ui": "^0.19.4", 
      "prop-types": "^15.6.0", 
      "react": "^15.6.2", 
      "react-dom": "^15.6.2", 
      "react-flexbox-grid": "^1.1.5" 
     } 
    } 

sample.spec.js ```

import React from 'react'; 
import {mount} from 'enzyme'; 

import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import PropTypes from 'prop-types'; 
import {RadioButton, RadioButtonGroup} from 'material-ui/RadioButton'; 

describe('material ui',() => { 
    it('can use with in mocha on enzyme',() => { 
     const muiTheme = getMuiTheme(); 
     const wrapper = mount(
      <RadioButton 
       value="foo" 
       label="bar" 
      />, 
      { 
       context: {muiTheme}, 
       childContextTypes: {muiTheme: PropTypes.object} 
      }); 
    }); 
}); 

```

test.setup.js

 

    import {JSDOM} from 'jsdom'; 

    const jsdom = new JSDOM(''); 

    const {window} = jsdom; 

    function copyProps(src, target) { 
     const props = Object.getOwnPropertyNames(src) 
      .filter(prop => typeof target[prop] === 'undefined') 
      .map(prop => Object.getOwnPropertyDescriptor(src, prop)); 
     Object.defineProperties(target, props); 
    } 

    global.window = window; 
    global.FormData = window.FormData; 
    global.document = window.document; 
    global.navigator = { 
     userAgent: 'node.js', 
     display: '' 
    }; 
    global.display = 'block'; 
    copyProps(window, global); 

오류

 
> NODE_ENV=nodes mocha --compilers js:babel-register --require babel-polyfill ./nodes/test.setup.js --recursive $(find nodes -name '*.spec.js') 



    material ui 
    1) can use with in mocha on enzyme 


    0 passing (160ms) 
    1 failing 

    1) material ui can use with in mocha on enzyme: 
    TypeError: Cannot set property 'display' of undefined 
     at Object.setValueForStyles (node_modules/react-dom/lib/CSSPropertyOperations.js:195:26) 
     at ReactDOMComponent._updateDOMProperties (node_modules/react-dom/lib/ReactDOMComponent.js:888:29) 
     at ReactDOMComponent.mountComponent (node_modules/react-dom/lib/ReactDOMComponent.js:518:12) 
     at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:43:35) 
     at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:368:34) 
     at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:255:21) 
     at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:43:35) 
     at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:368:34) 
     at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:255:21) 
     at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:43:35) 
     at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:368:34) 
     at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:255:21) 
     at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:43:35) 
     at ReactDOMComponent.mountChildren (node_modules/react-dom/lib/ReactMultiChild.js:234:44) 
     at ReactDOMComponent._createInitialChildren (node_modules/react-dom/lib/ReactDOMComponent.js:701:32) 
     at ReactDOMComponent.mountComponent (node_modules/react-dom/lib/ReactDOMComponent.js:520:12) 
     at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:43:35) 
     at ReactDOMComponent.mountChildren (node_modules/react-dom/lib/ReactMultiChild.js:234:44) 
     at ReactDOMComponent._createInitialChildren (node_modules/react-dom/lib/ReactDOMComponent.js:701:32) 
     at ReactDOMComponent.mountComponent (node_modules/react-dom/lib/ReactDOMComponent.js:520:12) 
     at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:43:35) 
     at ReactDOMComponent.mountChildren (node_modules/react-dom/lib/ReactMultiChild.js:234:44) 
     at ReactDOMComponent._createInitialChildren (node_modules/react-dom/lib/ReactDOMComponent.js:701:32) 
     at ReactDOMComponent.mountComponent (node_modules/react-dom/lib/ReactDOMComponent.js:520:12) 
     at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:43:35) 
     at ReactDOMComponent.mountChildren (node_modules/react-dom/lib/ReactMultiChild.js:234:44) 
     at ReactDOMComponent._createInitialChildren (node_modules/react-dom/lib/ReactDOMComponent.js:701:32) 
     at ReactDOMComponent.mountComponent (node_modules/react-dom/lib/ReactDOMComponent.js:520:12) 
     at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:43:35) 
     at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:368:34) 
     at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:255:21) 
     at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:43:35) 
     at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:368:34) 
     at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:255:21) 
     at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:43:35) 
     at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:368:34) 
     at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:255:21) 
     at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:43:35) 
     at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:368:34) 
     at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:255:21) 
     at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:43:35) 
     at mountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:102:32) 
     at ReactReconcileTransaction.perform (node_modules/react-dom/lib/Transaction.js:141:20) 
     at batchedMountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:124:15) 
     at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:141:20) 
     at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:60:26) 
     at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:95:27) 
     at Object._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:317:18) 
     at Object._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:399:32) 
     at Object.render (node_modules/react-dom/lib/ReactMount.js:420:23) 
     at Object.renderIntoDocument (node_modules/react-dom/lib/ReactTestUtils.js:89:21) 
     at renderWithOptions (node_modules/enzyme/build/react-compat.js:200:24) 
     at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:94:59) 
     at mount (node_modules/enzyme/build/mount.js:19:10) 
     at Context. (nodes/sample.spec.js:11:25) 

Answer 1

어떤 구성 요소도 마운트하지 않습니다.

나는 반작용 요소가이 테스트 저장소입니다 mount()

const wrapper = mount(
    <RadioButton /> // must supply a React element 
    , 
    { 
     context: {muiTheme}, 
     childContextTypes: {muiTheme: PropTypes.object} 
    } 
);