Jest不能使用material-ui的MenuItem快照測試

我使用typescript，react和material-ui。我試圖用笑話做一個快照測試。但是material-ui的MenuItem拋出Invariant Violation: getNodeFromInstance: Invalid argument.異常。Jest不能使用material-ui的MenuItem快照測試

這裏是部分我想測試：

import * as React from 'react'; 
import {MuiThemeProvider, Paper, Menu, MenuItem, Divider} from 'material-ui'; 

class App extends React.Component < any,any > { 

    public render() { 
    return (
     <MuiThemeProvider> 
     <div> 
      <Paper > 
      <Menu desktop={true}> 
       <MenuItem primaryText="Back"/> 
       <MenuItem primaryText="Forward" disabled={true}/> 
       <Divider/> 
       <MenuItem primaryText="Recently closed" disabled={true}/> 
       <MenuItem primaryText="Google" disabled={true}/> 
       <MenuItem primaryText="YouTube"/> 
      </Menu> 
      </Paper> 
     </div> 
     </MuiThemeProvider> 
    ); 
    } 
} 

export {App};

，這裏是測試

import * as React from 'react'; 
import {App} from '../menu'; 
import * as renderer from 'react-test-renderer'; 

describe('Layout',() => { 
    it('renders correctly',() => { 

    const layout = renderer.create(<App />).toJSON(); 

    expect(layout).toMatchSnapshot(); 
    }); 
});

而且錯誤的消息

Invariant Violation: getNodeFromInstance: Invalid argument. 

     at invariant (node_modules/fbjs/lib/invariant.js:44:15) 
     at Object.getNodeFromInstance (node_modules/react-dom/lib/ReactDOMComponentTree.js:162:77) 
     at Object.findDOMNode (node_modules/react-dom/lib/findDOMNode.js:49:41) 
     at ListItem.applyFocusState (node_modules/material-ui/List/ListItem.js:319:43) 
     at MenuItem.applyFocusState (node_modules/material-ui/MenuItem/MenuItem.js:206:26) 
     at MenuItem.componentDidMount (node_modules/material-ui/MenuItem/MenuItem.js:175:12) 
     at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:265:25 
     at measureLifeCyclePerf (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:75:12) 
     at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:264:11 
     at CallbackQueue.notifyAll (node_modules/react-test-renderer/lib/CallbackQueue.js:76:22) 
     at ReactTestReconcileTransaction.close (node_modules/react-test-renderer/lib/ReactTestReconcileTransaction.js:36:26) 
     at ReactTestReconcileTransaction.closeAll (node_modules/react-test-renderer/lib/Transaction.js:206:25) 
     at ReactTestReconcileTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:153:16) 
     at batchedMountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:69:27) 
     at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:140:20) 
     at Object.batchedUpdates (node_modules/react-test-renderer/lib/ReactDefaultBatchingStrategy.js:62:26) 
     at Object.batchedUpdates (node_modules/react-test-renderer/lib/ReactUpdates.js:97:27) 
     at Object.render (node_modules/react-test-renderer/lib/ReactTestMount.js:125:18) 
     at Object.it (src/shell/containers/__tests__/app.test.tsx:8:29) 
     at Promise.resolve.then.el (node_modules/p-map/index.js:42:16) 
     at process._tickCallback (internal/process/next_tick.js:109:7

如果我刪除菜單項和測試通過組件的菜單。

你能幫我解決這個錯誤嗎？

來源

2017-05-27 bonheury

這是一個修復，直到我想出一個更好的解決方案，但嘲笑你的菜單或菜單項將使測試通過。

jest.mock('material-ui/MenuItem');

不幸的是，這會使快照測試成爲多餘的，因爲您無法看到對菜單項所做的更改。

來源

2017-06-22 13:37:04 gonzalovazzquez

Jest不能使用material-ui的MenuItem快照測試

回答

相關問題