CODEWITHSUNDEEP
javascriptreactjsmaterial-uijestjsenzyme
softshipper
softshipper

Reputation: 34071

How to test a component base on material ui?

I have the following component, that is build with 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;

I am trying to write a test for it:

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

How to write a test for a component, that is using material-ui components? In the case above, I tried to figure out, if the component contains Welcome.
I read https://material-ui-next.com/guides/testing/, but it is not clear, how can I write a test.

Upvotes: 1

Views: 3062

Answers (1)

Andrew Miroshnichenko
Andrew Miroshnichenko

Reputation: 2074

UPD: API changed from shallow to mount

Did you tried to use their API described here? Probably your test can look something like this:

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

Upvotes: 2

Related Questions