Question

我使用打字稿，反应和材料-ui。我试图用开玩笑做快照测试。但是材料-ui的MenuItem抛出Invariant Violation: getNodeFromInstance: Invalid argument.异常。

以下是我试图测试的组件：

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，则测试通过。

你能帮我解决这个错误吗？

Answer 1

在我提出更好的解决方案之前，这是一个修复，但是模拟菜单或菜单项会使测试通过。

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

不幸的是，这会使快照测试变得多余，因为您无法看到对菜单项所做的更改。

Answer 2

我认为ReactDOM.findDOMNode导致您的测试失败。当我嘲笑它时，测试用例还有其他错误。我认为您可能希望浅化呈现组件以进行快照测试，否则您将不得不模拟很多依赖项。

比嘲弄MenuItem更好。 MenuItem在内部使用findDOMNode，在模拟时会导致其他错误。

您可能想看一下这个线程https://github.com/YouCanBookMe/react-datetime/issues/384

Answer 3

单独的菜单组件，没有 MenuItems 和 props/with app's props，也失败，在玩笑测试中渲染，甚至没有运行快照：

错误：未捕获 [类型错误：无法读取未定义的属性 'root']

放弃并暂时将其排除。

Jest无法使用material-ui的MenuItem进行快照测试

3 个答案: