如何基于材料ui测试组件？

Question

我有以下组件，即用https://material-ui-next.com/构建。

import React from 'react';
import { AppBar, Toolbar } from 'material-ui';
import { Typography } from 'material-ui';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import {lightBlue} from 'material-ui/colors';

const theme = createMuiTheme({
  palette: {
    primary: {
      main:lightBlue['A700']
    },
    text: {
      primary: '#fff',
    }
  },
});

const View = (props) => (
  <MuiThemeProvider theme={theme}>
    <AppBar position="static">
      <Toolbar>
      <Typography variant="title">
        {props.title}
      </Typography>          
      </Toolbar>
    </AppBar>
  </MuiThemeProvider>
);
export default View;  

我正试着为它写一个测试：

import React from 'react';
import { shallow } from 'enzyme';
import View from '../Views/View';
import { Typography } from 'material-ui';

it('renders', () => {
  const wrapper = shallow(<View title='Welcome' />);
  expect(wrapper.find('Typography').text()).toEqual('Welcome');
});  

如何为组件编写测试，即使用material-ui组件？在上面的例子中，我试图找出组件是否包含Welcome。

我读过https://material-ui-next.com/guides/testing/，但还不清楚，我怎么写一个测试。

Answer 1

API从shallow mount 到

你试过使用他们的API 在此描述吗？也许您的测试结果如下所示：

import React from 'react';
import { createMount } from 'material-ui/test-utils';
import View from '../Views/View';
import { Typography } from 'material-ui';

it('renders', () => {
  const mount = createMount();
  const wrapper = mount(<View title='Welcome' />);
  expect(wrapper.find('Typography').text()).toEqual('Welcome');
});