Как мне издеваться над реализацией материала-интерфейса со стилями? - PullRequest
Новая
       24

Как мне издеваться над реализацией материала-интерфейса со стилями?

0 голосов
/ 03 июля 2018

Как мне посмеяться над реализацией withStyles в material-ui/core/styles.js?

Вот тест: 

import React from 'react'
import { shallow } from 'enzyme'
import { withStyles } from '@material-ui/core/styles'

import TempComponent from './TempComponent'

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

it('renders correctly', () => {
  const withStylesFake = styles =>
    component => (
      component
    )

  withStyles.mockImplementation(withStylesFake)

  const wrapper = shallow(<TempComponent />)
  expect(wrapper).toMatchSnapshot()
})

Вот код: 

import React from 'react'
import { withStyles } from '@material-ui/core/styles'

const TempComponent = () => (
  <button>Click Me!</button>
)

export default withStyles({})(TempComponent)

Вот ошибка: 

TypeError: _styles.withStyles.mockImplementation is not a function

  at Object.<anonymous>.it (src/TempComponent.snapshot.test.js:15:22)
      at new Promise (<anonymous>)
  at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
      at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:188:7)

Это будет работать: 

// ./__mocks__/@material-ui/core/styles
export const withStyles = styles => (
  component => (
    component
  )
)

но это не локально для теста.

Ответы [ 3 ]

0 голосов
/ 13 ноября 2018

Этот способ я использовал для определения стиля компонента с помощью пользовательского интерфейса материала. 

import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  root: {
    ...theme.mixins.gutters(),
    paddingTop: theme.spacing.unit * 2,
    paddingBottom: theme.spacing.unit * 2,
    marginBottom: theme.spacing.unit * 3,
    maxWidth: theme.spacing.unit * 120,
    overflowX: 'auto',
  },
});

function PaperSheet() {
    return (
        <Paper className={classes.root} elevation={1} />
    );
}

export default withStyles(styles)(PaperSheet);
0 голосов
/ 13 ноября 2018

Поскольку импорт TempComponent оценивается перед тестовым кодом, вам нужно будет смоделировать стили в начале процесса. Вызов mockImplementation происходит слишком поздно в процессе.

Есть два способа сделать это: передать фабрику в jest.mock или использовать ручной макет. Ручной макет работает для вас, но вы говорите, что хотите что-то локальное для теста, поэтому вы захотите использовать заводской параметр. Вот как.

Смоделируйте импорт styles вместо импорта core. Используйте второй аргумент jest.mock, «параметр фабрики модулей», чтобы передать функцию фабрики модулей: функцию, которая возвращает объект, который заменяет импорт styles. Для ваших целей это означает, что объект должен иметь функцию withStyles: 

jest.mock('@material-ui/core/styles', () => ({
  withStyles: styles => component => component
}));

Нет необходимости импортировать withStyles в ваш тест или вызвать mockImplementation; Вы можете удалить эти строки.

0 голосов
/ 05 июля 2018

Я нашел способ экспортировать компонент следующим образом. Не нужно издеваться.

Тест: 

import React from 'react'
import { shallow } from 'enzyme'

import { TempComponent } from './TempComponent'

it('renders correctly', () => {
  const wrapper = shallow(<TempComponent />)
  expect(wrapper).toMatchSnapshot()
})

Реализация: 

import React from 'react'
import { withStyles } from '@material-ui/core/styles'

export const TempComponent = () => (
  <button>Click Me!</button>
)

export default withStyles({})(TempComponent)
...