Jest不能对material-ui的MenuItem使用快照测试 [英] Jest cannot use a snapshot test with MenuItem of material-ui
问题描述
我使用打字稿,react和material-ui.我正在尝试开玩笑地进行快照测试.但是material-ui的MenuItem抛出Invariant Violation: getNodeFromInstance: Invalid argument.
异常.
I work with typescript, react and material-ui. I'm trying to do a snapshot test with jest. But material-ui's MenuItem throw Invariant Violation: getNodeFromInstance: Invalid argument.
exception.
这是我要测试的组件:
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
如果我从组件中删除了MenuItem和Menu,则测试通过.
If I remove MenuItem and Menu from component the test pass.
可以帮我解决这个错误吗?
Can you help me to deal with this errors, please ?
推荐答案
我认为ReactDOM.findDOMNode导致测试失败.当我嘲笑它时,测试用例还有其他错误.我认为您可能希望浅化呈现该组件以进行快照测试,否则您将不得不模拟很多依赖项.
I think ReactDOM.findDOMNode is causing your test to fail. When I mocked it test case had some other error. I think you might want to shallow render the component to do snapshot testing else you will have to mock a lot of dependencies.
比嘲弄MenuItem更好. MenuItem在内部使用findDOMNode,在模拟时会导致其他错误.
It is better than mocking MenuItem. MenuItem is internally using findDOMNode which when mocked lead to other errors.
您可能想看一下该线程 https://github.com /YouCanBookMe/react-datetime/issues/384
You might want to take a look at this thread https://github.com/YouCanBookMe/react-datetime/issues/384
这篇关于Jest不能对material-ui的MenuItem使用快照测试的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!