как сделать снимок из компонента, созданного с помощью стилей пользовательского интерфейса, таким образом, чтобы стили были в снимке - PullRequest
Новая
       41

как сделать снимок из компонента, созданного с помощью стилей пользовательского интерфейса, таким образом, чтобы стили были в снимке

0 голосов
/ 03 апреля 2019

Я использую material-UI в своем веб-приложении реагирования. Я хочу протестировать свой компонент с помощью jest таким образом, чтобы стили были сохранены в снимке компонента, как то, что jest-styled-component делает для styleled-компонента, но я не могу.

мой пример проекта вы можете увидеть в codesandbox но вот важные части: Я создаю свой проект с помощью create-реагировать-приложение с помощью этой команды: 

npx create-react-app myapp

это мой файл index.js: 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {MuiThemeProvider} from '@material-ui/core/styles';
import theme from './customTheme';
ReactDOM.render(
    <MuiThemeProvider theme={theme}>
        <App/>
    </MuiThemeProvider>,
    document.getElementById('root')
);

это мой файл customTheme.js в папке src: 

import {createMuiTheme} from '@material-ui/core/styles';
const theme = createMuiTheme({
    typography: {
        fontFamily: [
            'Roboto',
            '"Segoe UI"',
            '"Helvetica Neue"',
            'Arial',
            'sans-serif',
            '"Apple Color Emoji"',
            '"Segoe UI Emoji"',
            '"Segoe UI Symbol"',
        ].join(','),
    },
    palette: {
        color: 'blue',
    }
});
export default theme;

и это мой App.js, который я хочу проверить: 

import React from 'react';
import PropTypes from 'prop-types';
import {withStyles} from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
export const styles = theme => ({
    mystyle: {
        fontFamily: theme.typography.fontFamily,
        border: '1px solid green',
        background: 'yellow',
        color: theme.palette.color,
    },
});
function MyComponent(props) {
    const {classes} = props;
    return (
        <div>
            <p className={classes.mystyle}> my text </p>
            <Button className={classes.mystyle}>my button</Button>
        </div>
    );
}
MyComponent.propTypes = {
    classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(MyComponent);

обратите внимание, что я перезаписываю стили с помощью JSS, и у меня есть своя собственная тема. Я хочу получить снимок из компонента таким образом, чтобы css был частью снимка, как , эта проблема из репозитория Material-UI в github или как в jest-styled-component-do для styled-component. для достижения этой цели я написал этот код в моем demo.test.js: 

import React from "react";
import renderer from "react-test-renderer";
import App from '../App';
import {styles} from '../App';
describe("snapshot test", () => {
    it("should match snapshot", () => {
        const wrapper = renderer
            .create(<App classes={styles}/>)
            .toJSON();
        expect(wrapper).toMatchSnapshot();
    });
});

но в этом тесте мои стили не отображаются в снимке, поэтому, если я изменю стиль в компоненте приложения, проверка снимка не будет неудачной. Я прочитал ниже ресурсы, но не смог получить то, что хотел: https://github.com/mui-org/material-ui/issues/9492 https://github.com/mui-org/material-ui/issues/6834

спасибо за любые отзывы

...