Компонент, показанный как НЕ УКАЗАННЫЙ, когда извлечен из реквизита фермента / шута компонента UI во время тестирования - PullRequest
Новая
       4

Компонент, показанный как НЕ УКАЗАННЫЙ, когда извлечен из реквизита фермента / шута компонента UI во время тестирования

0 голосов
/ 27 февраля 2020

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

Основной компонент, который я нахожу и пытаюсь получить доступ к expandableContent.component ( ) проверить правильность создаваемого значения в тестируемом им компоненте. 

      <MuiCard
        expandableSection={{
          component: () => renderAdditionalSupplierContent(
            product,
            handleNewSupplierQuantity,
            supplierChangeInformation,
            handleSupplierReasonChange,
          ),
        }}
      />

Функция im, пытающаяся проверить, возвращает правильные данные 

const renderAdditionalSupplierContent = (
  product,
  handleNewSupplierQuantity,
  supplierChangeInformation,
  handleSupplierReasonChange,
) => {
  const supplierChangesForProduct = supplierChangeInformation
    .find((p) => p.productId === product.productId);

  const options = [
    { label: 'None', value: '0' },
    { label: 'Out of Stock', value: '1' },
    { label: 'Discontinued', value: '2' },
    { label: 'Buyer Request', value: '3' },
    { label: 'Unauthorised Quantity', value: '4' },
    { label: 'Unknown product', value: '5' },
    { label: 'Partially Available', value: '6' },
    { label: 'Order Charge Removal', value: '7' },
    { label: 'Avoid Order Charge', value: '8' },
    { label: 'Agreed Substitute', value: '9' },
    { label: 'Buyer Request', value: '10' },
  ];

  return (
    <>
      <TextboxV2
        type="number"
        id="new-supplier-quantity"
        value={supplierChangesForProduct ? supplierChangesForProduct.newQuantity : product.quantity}
        label="Enter New Quantity:"
        onChange={(event) => handleNewSupplierQuantity(event, product)}
      />
      {
        supplierChangesForProduct && supplierChangesForProduct.newQuantity !== product.quantity
        && (
          <SelectList
            id={`supplier-reason-${product.productId}`}
            label="Select A Reason"
            options={options}
            displayEmpty
            selectedOption={
              supplierChangesForProduct.reason
                ? supplierChangesForProduct.reason.value
                : null
            }
            onChange={(event) => handleSupplierReasonChange(event, product, options)}
          />
        )
      }
    </>
  );
};

In jest При проверке, чтобы увидеть, что Значение приведенного ниже оператора равно 

expect(productCard.props().expandableSection.component()).toBe(true);

Возвращаемое значение от jest было 

<React.Fragment>
   <UNDEFINED 
      id="new-supplier-quantity" 
      label="Enter New Quantity:" 
      onChange={[Function onChange]} 
      type="number" 
      value={10} 
    />
</React.Fragment>

Неудивительно, почему я не смог найти список или поле ввода как равные НЕ УКАЗАН

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

Заранее, Крис.

...