Question

我有一个React项目，其中有一个可以映射对象数组并渲染其他组件的组件，如下所示：

return (
    historyParts.map((historyPart, historyPartIndex) =>
      (<div key={`historyPart${historyPartIndex}` // eslint-disable-line react/no-array-index-key
        }
      >
        <div>
          {historyPart.link &&
            <Element>
              <NavLink
                to={createLocationForHistoryItems(handlingLocation, historyPart.link.code)}
              >
                {findLinkText(historyPart[0].link, intl)}
              </NavLink>
            </Element>
            }

          <BubbleText
            bodyText={findText(historyPart.summary)}
            className="bubble-panel__tekst"
          />
        </div>
      </div>

      )));

这是我为此组件编写的测试：

import React from 'react';
import { shallowWithIntl, intlMock } from 'testHelpers/intl-enzyme-test-helper';
import { expect } from 'chai';

import { HistoryDescriptionType9} from './HistorikkMalType9';

const historyPart = {
  cause: null,
  actionPoint: null,
  summary: 'adsadsd',
  link: {
    code: 'UTTAK',
    codeType: 'SKJERMLENKE_TYPE',
    name: 'Uttak',
  },
};
const historyParts = [historyPart , historyPart ];
const handlingLocation = {};

describe('HistoryDescriptionType9', () => {
  it('should render HistoryDescriptionType9', () => {
    const wrapper = shallowWithIntl(<HistoryDescriptionType9
      historyParts ={historyParts }
      handlingLocation={handlingLocation}
      intl={intlMock}
    />);

    const bubbleText = wrapper.find('BubbleText');
    expect(bubbleText).to.have.length(historyParts.length);
  });
});

因此，由于我要映射一个包含2个对象的数组，因此应该呈现2个BubbleText组件。但是，我收到一条消息，表明测试失败：

AssertionError: expected { length: 0 } to have a length of 2 but got 0
      + expected - actual

我也尝试过导入组件，并在find函数中显式使用它，如下所示：

import BubbleText from './bubbleText';

const bubbleText = wrapper.find(BubbleText);

但是，我得到了相同的错误消息。由于映射功能，我认为测试失败。我该如何解决？

Answer 1

idk BubbleText组件的外观如何，但是此问题可能是因为您通过了测试summary: 'adsadsd'而不是“ BubbleText”

React / Enzyme-测试使用map函数渲染内容的组件是否失败

1 个答案: