Ферментное поверхностное тестирование с Material-UI

Question

Я использую Material UI в своем приложении. У меня есть следующий компонент, который я хочу проверить на допустимый текст заявления об отказе (обратите внимание, что я использую здесь withStyles HOC):

import React from 'react';
import { object } from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';

const headerBarHeight = 64;

const styles = () => ({
    disclaimer: {
        position: 'absolute',
        bottom: headerBarHeight,
        padding: '0 0 5px 10px'
    }
});

const Disclaimer = props => {
    const { classes } = props;

    return (
        <div className={classes.disclaimer}>
            <Typography gutterBottom noWrap>
                Copyright StaticSphere { new Date().getFullYear() }
            </Typography>
        </div>
    );
};

Disclaimer.propTypes = {
    classes: object.isRequired
};

export default withStyles(styles)(Disclaimer);

Я пытаюсь написать тест, который подтверждает, что год считается правильным:

import React from 'react';
import { shallow } from 'enzyme';
import { Typography } from '@material-ui/core';

import Disclaimer from 'components/Shell/Disclaimer';

describe('Disclaimer', () => {
    it('displays the proper year', () => {
        var component = shallow(
            <Disclaimer />
        );

        var year = new Date().getFullYear();
        var text = component.find(Typography).text();

        expect(text).toBe(`Copyright StaticSphere ${year}`);
    });
});

Это не работает. Тест жалуется, что не может найти компонент Typography. Глядя на документацию, это ожидаемо, поскольку типография не является корневым компонентом. Когда я меняю тест на использование mount, все работает.

Тем не менее, я читал, что я должен пытаться использовать мелкое везде, где это возможно, так как mount создает реальный DOM для работы. Так есть ли лучший способ справиться с этим? Я провел день в интернете и до сих пор не нашел хорошего примера лучшего способа.

Спасибо!

Answer 1

OMG .... мне тоже понадобилось время, чтобы заставить его работать, но я нашел рабочий пример на странице репо. material-ui имеет обертку поверх фермента shallow и mount, которая позволяет вам dive компонент, который вы хотите проверить.

shallow = createShallow({ dive: true }); сделал мой день.

Это конфигурация, за которой я следовал , также в моем случае мне пришлось вызывать component.update(); после выполнения некоторых операций в другом для просмотра моего состояния обновленным.

Answer 2

Когда вы используете HOC, нам нужно использовать WrappedComponent, чтобы обернуть jsx внутри него.

 var component = shallow(
        <Disclaimer,WrappedComponent />
    ).dive(); 

dive() will further shallow re-render Components like in our case it's Typegraphy`.

Вы можете попробовать это без использования dive()

Помимо этого, вы можете просто получить доступ к типографии с помощью:

var text = component.find('withStyles(Typography)').text();

Надеюсь, это поможет, дайте мне знать, если проблема все еще сохраняется