Как проверить реагирующие компоненты, упакованные в ThemeProvider / withStyle? - PullRequest
Новая
       15

Как проверить реагирующие компоненты, упакованные в ThemeProvider / withStyle?

1 голос
/ 11 июля 2019

Я хочу протестировать компонент, обернутый withStyle, но похоже, что объект темы не проходит через компонент. Мне любопытно, есть ли хорошая практика для этого.

Я хотел попробовать использовать createShallow () и dive (), чтобы получить доступ к 

//GameBoard.test.js
import React from 'react';
import { createShallow } from '@material-ui/core/test-utils'
import GameBoard from './GameBoard';
import { ThemeProvider} from '@material-ui/styles';
import { createMuiTheme } from '@material-ui/core'

describe('GameBoard', () => {

  const theme = createMuiTheme({
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    typography: {
      htmlFontSize: 18
    }
  });

  let shallow

  const MockTheme = ({ children }) => {
    return (
      <ThemeProvider theme={theme}>
        {children}
      </ThemeProvider>
    );
  }

  beforeAll(() => {
    shallow = createShallow()
  })



  it('renders without crashing', () => {
    const board = shallow(<MockTheme><GameBoard/></MockTheme>)
  })

  it('random answer is between 0 and 100', () => {
    const board = shallow(<MockTheme><GameBoard/></MockTheme>)
    board.find(GameBoard).dive()
    //this is what I really want to try, to access its component method:
    board.find(GameBoard).dive().instance().setConfig(0, 100)
    //expect(board.state('answer')).toBeGreaterThanOrEqual(0)
    //expect(board.state('answer')).toBeLessThanOrEqual(100)
  })
})

И мой компонент GameBoard экспортируется с 

export default withStyles(styles)(GameBoard)

App.js, его родительский компонент 


const theme = createMuiTheme({
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  typography: {
    htmlFontSize: 18
  }
});

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <GameBoard/>
    </ThemeProvider>
  );
}

export default App;

стили 

const styles = theme => createStyles({
  root: {
    flexGrow: 1,
    marginBottom: theme.spacing(3),
  },

})

Результат теста 

FAIL  src/GameBoard.test.js
  ● Console

    console.error node_modules/warning/warning.js:34
      Warning: Material-UI: the `styles` argument provided is invalid.
      You are providing a function without a theme in the context.
      One of the parent elements needs to use a ThemeProvider.

  ● GameBoard › random answer is between 0 and 100

    TypeError: theme.spacing is not a function

      4 |   root: {
      5 |     flexGrow: 1,
    > 6 |     marginBottom: theme.spacing(3),
        |                         ^
      7 |   },
      8 |   paper: {
      9 |     height: "100%",

1 Ответ

0 голосов
/ 12 июля 2019

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

describe('GameBoard', () => {

  const theme = createMuiTheme({
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    typography: {
      htmlFontSize: 18
    }
  });

  let mount

  const MockTheme = ({ children }) => {
    return (
      <ThemeProvider theme={theme}>
        {children}
      </ThemeProvider>
    );
  }

  beforeAll(() => {
    mount = createMount()
  })



  it('renders without crashing', () => {
    const board = mount(<MockTheme><GameBoard/></MockTheme>)
  })

  it('random answer is between 0 and 100', () => {
    const boardWrapper = mount(<MockTheme><GameBoard/></MockTheme>)
    const board = boardWrapper.find("GameBoard").at(0)
    board.instance().setNewConfig(0, 100)
    expect(board.state('answer')).toBeGreaterThanOrEqual(0)
    expect(board.state('answer')).toBeLessThanOrEqual(100)
  })
})
...