Материал UI + Jest + Ферментное тестирование для вкладок

Question

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

import React, { useState } from 'react';

import { Grid, Typography, Tabs, Tab, CircularProgress, Button } from '@material-ui/core';
import useStyles from './styles';

const TabExample = () => {
  const classes = useStyles();
  const [activeTab, setActiveTab] = useState(0);

  return (
    <Grid container className={classes.container}>
      <div className={classes.formContainer}>
        <div className={classes.form}>
          <Tabs
            id="tabs"
            value={activeTab}
            onChange={(_e, id) => setActiveTab(id)}
            indicatorColor="primary"
            textColor="primary"
            centered
          >
            <Tab label="Tab1" classes={{ root: classes.tab }} />
            <Tab label="Tab2" classes={{ root: classes.tab }} />
          </Tabs>
          {activeTab === 0 ? (
            <div>TAB 1 </div>
          ) : (
            <div>TAB 1 </div>
          )}
        </div>
      </div>
    </Grid>
  ) 
}

Я испробовал несколько решений, все они не работают, и я не знаю, где находится эта документация. Вот что я попробовал:

import TabExample from '../TabExample';

it('Tab is changed when tab is clicked', () => {
  const wrapper = mount(
    <Provider>
       <TabExample />
    </Provider>,
  );

  // prints tabs component
  console.log(wrapper.find('#tabs').debug());

  // prints nothing
  console.log(wrapper.find('WithStyles(Grid)').debug());

  // prints first tab
  console.log(wrapper.find('#tabs button').first().debug());

  // TypeError: Cannot read property 'value' of undefined
  console.log(wrapper.find('#tabs button').value.debug());
});

Не уверен, как получить

Answer 1

Я понял это:

it('Initial tab is 0', () => {
    expect(
      wrapper
        .find('WithStyles(ForwardRef(Tabs))')
        .childAt(0)
        .props().value,
    ).toBe(0);

    expect(
      wrapper
        .find('WithStyles(ForwardRef(Tab))')
        .at(0)
        .props().selected,
    ).toBe(true);

  });