时间戳

首页 > 解决方案 > 使用 svg 渲染图像标签时，使用酶反应组件单元测试失败

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

问题描述

我正在使用带有 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。

标签： javascriptreactjstypescriptenzyme

解决方案

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

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

做：

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

我不确定这是否是最好的解决方案，但它让我克服了我的问题。

推荐阅读