代码之家 › 专栏 › 技术社区 › softshipper

如何基于物料ui测试组件?

enzyme jestjs material-ui reactjs javascript

softshipper · 技术社区 · 6 年前

我有以下组件,它是用 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/ ,但不清楚如何编写测试。

1 回复 | 直到 6 年前

Andrew Miroshnichenko 6 年前

UPD:API更改自 shallow 到 mount

您是否尝试使用他们的API described here ? 您的测试可能如下所示:

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');
});

推荐文章