Как смоделировать Material-UI withWidth HOC - PullRequest
Новая
       21

Как смоделировать Material-UI withWidth HOC

0 голосов
/ 23 октября 2018

Предположим, у меня есть компонент, который обернут в Material-UI withWidth HOC.Как вы смеетесь с функцией isWidthUpWidth, используя jest для возврата предопределенного bool?

SUT 

import React, { Component } from 'react';
import withWidth, { isWidthUp } from '@material-ui/core/withWidth';

class ComponentWithWidth extends Component {

    render() {
        const { width } = this.props;

        return isWidthUp('md', width)
            ? <p>above md</p>
            : <p>below md</p>;
    }
}

export default withWidth()(ComponentWithWidth);

Что я пробовал

Попытка 1 

import React from 'react';
import { configure, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import ComponentWithWidth from '../ComponentWithWidth';
import { isWidthUp } from '@material-ui/core/withWidth';

configure({ adapter: new Adapter() });

jest.mock('@material-ui/core/withWidth');

describe('ComponentWithWidth', () => {

    it('Should render', () => {

        isWidthUp = jest.fn().mockReturnValue(true);

        const el = mount(<ComponentWithWidth />);
    });
});

Проблема 

TypeError: (0 , _withWidth.default)(...) is not a function

Попытка 2 

import React from 'react';
import { configure, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import ComponentWithWidth from '../ComponentWithWidth';
import withWidth from '@material-ui/core/withWidth';

configure({ adapter: new Adapter() });

describe('ComponentWithWidth', () => {

    it('Should render', () => {

        withWidth.isWidthUp = jest.fn().mockReturnValue(false);

        const el = mount(<ComponentWithWidth />);
    });
});

Проблема

Компонент игнорирует возвращаемое значение widthWidth.isWidthUp mock.

1 Ответ

0 голосов
/ 23 октября 2018

Я не знаком с насмешками над esmodules, но я думаю, что вы не должны тестировать его таким образом (тестирование деталей реализации, которые есть).

Вы можете просто пропустить пропелу width в монтировании, котороев основном издевается.См demo.test.js: https://codesandbox.io/s/m9o783rox

...