Блог

Я пытаюсь отобразить компонент с помощью Jest, у которого есть дочерний компонент, имеющий свои собственные требуемые типы свойств. Grid65Display используется для простой структуры сетки, отображающей метки преимуществ, и требует реквизита displayValue и displayLabel. Когда я запускаю тест, я получаю эту ошибку:

 console.error node_modules/prop-types/checkPropTypes.js:20
    Warning: Failed prop type: The prop `displayValue` is marked as required in `Grid654Display`, but its value is `undefined`.
        in Grid654Display (created by BenefitDetail)
        in BenefitDetail (created by RComponent)
        in ContextProvider (created by RComponent)
        in ApolloProvider (created by MockedProvider)
        in MockedProvider (created by RComponent)
        in ApolloProvider (created by RComponent)
        in RComponent
 

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

BenefitDetail.js

 const Grid654Display = ({ displayLabel, displayValue }) => (
  <Grid item xs={6} md={5} lg={4}>
    <Typography variant="body2" color="textSecondary" component="p">
      {displayLabel}
    </Typography>
    <Typography variant="h6" component="p">
      {typeof displayValue === 'function' ? displayValue() : String(displayValue || '-')}
    </Typography>
  </Grid>
);

const BenefitDetail = props => {
  
...

  <Grid654Display displayLabel="Deduction Code" displayValue={deductionCodeName} />

...

}

Grid654Display.propTypes = {
  displayLabel: PropTypes.string.isRequired,
  displayValue: PropTypes.oneOfType([PropTypes.func, PropTypes.string]).isRequired
};

BenefitDetail.propTypes = {
  employees: PropTypes.array.isRequired,
  benefit: PropTypes.object.isRequired,
  needContributions: PropTypes.bool,
  setValues: PropTypes.func.isRequired,
  setEmployeeList: PropTypes.func.isRequired,
  setShowEffectiveDateCol: PropTypes.func.isRequired
};

BenefitDetail.defaultProps = {
  needContributions: false
};

EmployeeTable.propTypes = {
  onEditBenefit: PropTypes.func.isRequired,
  activeEmps: PropTypes.array.isRequired,
  needContributions: PropTypes.bool.isRequired
};

export default BenefitDetail;
 

BenefitDetail.test.js

 import React from 'react';
import { render } from '@testing-library/react';
import { ApolloProvider } from '@apollo/react-hooks';
import wait from 'waait';
import { MockedProvider } from '@apollo/react-testing';
import { client } from '../../../../../client';
import { GET_BENEFITS_ASSIGNED_EMPLOYEES } from '../../../../../gqls/queries/benefits.query';
import BenefitDetail from '../../../../../components/company/company_admin/benefits/BenefitDetail';
import { ContextProvider } from '../../../../../components/ContextProvider';

const mocks = [
  {
    request: {
      query: GET_BENEFITS_ASSIGNED_EMPLOYEES(),
      variables: {
        companyId: 1,
        benefitsetupCategory: '1',
        employeeBenefitSetupStatus: 'ACTIVE'
      }
    },
    result: {
      data: {
        GET_BENEFITS_ASSIGNED_EMPLOYEES: { id: '1', employeeBenefitTotal: '2000' }
      }
    }
  }
];

const RComponent = () => {
  return (
    <ApolloProvider client={client}>
      <MockedProvider mocks={mocks} addTypename={false}>
        <ContextProvider>
          <BenefitDetail
            displayValue={() => {}}
            employees={[]}
            benefit={{}}
            setValues={() => {}}
            setEmployeeList={() => {}}
            setShowEffectiveDateCol={() => {}}>
        </ContextProvider>
      </MockedProvider>
    </ApolloProvider>
  );
};

beforeEach(() => {
  jest.resetAllMocks();
});

describe('Testing company components', () => {
  describe('Testing <BenefitDetail />', () => {
    it('should render basic component', async () => {
      const { debug } = render(<RComponent />);
      await wait();
      debug(undefined, Infinity);
    });
  });
});