用 svg 渲染图像标签时，用酶反应组件单元测试失败答案

【问题标题】：React component unit test with enzyme fails when rendering Image tag with svg用 svg 渲染图像标签时，用酶反应组件单元测试失败
【发布时间】：2018-07-10 14:16:27
【问题描述】：

我正在使用带有 Typescript 的 React，并使用 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。

【问题讨论】：

都预期会失败吗？
@eramit2010 哎呀抱歉，我忘了指出期望失败的地方。我已经更新了我原来的帖子。
您可以尝试导入 Image1 和 Image2，然后找到导入的组件而不是字符串。这是一个奇怪的解决方案，但有时它对我有用。
@eramit2010 嘿，你和我发现了相同的解决方案！如果你想写一个解决方案，我很乐意接受并给予你信任。
我在过去和导入组件作品时遇到过同样的问题。

标签： javascript reactjs typescript enzyme

【解决方案1】：

我找到了一个可行的解决方案。而不是这样做：

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

做：

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

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

【讨论】：