javascript - 使用 svg 渲染图像标签时，使用 enzyme 进行 react 组件单元测试失败

Question

我正在将 React 与 Typescript 结合使用，并使用 Jest 和 Enzyme 进行单元测试。我正在尝试对以下组件进行单元测试(当然是简化的):

import image1 from 'path/to/image1.svg';
import image2 from 'path/to/image2.svg';

export const ShowImage: React.StatelessComponent<{isTab1: boolean, someId: number, isTab2: boolean }> = ({ isTab1, someId, isTab2}) => (
    <td>
        {isTab1 !== true && someId === 1 && !isTab2 ?
            <Image1 />
            :
            null
        }
        {isTab1 !== true && someId === 2 && !isTab2 ?
            <Image2 />
            :
            null
        }
    </td>
);

export const Image1 = () => (
    <Image src={image1} />
);

export const Image2 = () => (
    <Image src={image2} />
);

Image 标签是一个 React Bootstrap 标签。我正在测试文件中测试 ShowImage 组件，如下所示:

import * as React from 'react';
import * as Enzyme from 'enzyme';
import { mount, shallow } from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-15';

Enzyme.configure({ adapter: new Adapter() });

function setupShowImageComponent(isTab1: boolean, someId: number, isTab2: boolean): any {
    const props = {
        isTab1: isTab1,
        someId: someId,
        isTab2: isTab2
    };

    const enzymeWrapper = mount(<ShowImage {...props} />);

    return {
        props,
        enzymeWrapper
    }
}

describe('Test ShowImage Component', () => {
    it('false, 1, false', () => {
        const { enzymeWrapper } = setupShowImageComponent(false, 1, false);

        expect(enzymeWrapper.find('td')).toHaveLength(1);    
        expect(enzymeWrapper.find('Image1')).toHaveLength(1); // fails: receives length 0
        expect(enzymeWrapper.find('Image2')).toHaveLength(0);
    });

    it('false, 2, false', () => {
        const { enzymeWrapper } = setupShowImageComponent(false, 2, false);

        expect(enzymeWrapper.find('td')).toHaveLength(1);    
        expect(enzymeWrapper.find('Image1')).toHaveLength(0);
        expect(enzymeWrapper.find('Image2')).toHaveLength(1); // fails: receives length 0
    });
});

这两个测试均失败。我正在测试的其他 React 组件都很好，但这个组件却让我困惑。任何帮助将不胜感激。值得注意的是，这曾经有效，但当我将代码迁移到使用 TypeScript 时，这两个测试失败了。

更新

经过一些实验，如果我测试 Image 标记而不是 Image1 或 Image2 的存在，它就会起作用。它似乎不识别功能组件，而是识别它的子组件？我在这里很困惑。如何测试它是特定的 Image1 还是 Image2 而不仅仅是测试 Image？同样，这适用于 Javascript，但不适用于 TypeScript。

Answer 1

我找到了一个有效的解决方案。而不是这样做:

expect(enzymeWrapper.find('Image1')).toHaveLength(1); // fails

做:

expect(enzymeWrapper.find(Image1)).toHaveLength(1); // passes

我不确定这是否是最好的解决方案，但它可以帮助我解决问题。