Javascript 使用svg渲染图像标记时,使用酶进行React组件单元测试失败

Javascript 使用svg渲染图像标记时,使用酶进行React组件单元测试失败,javascript,reactjs,typescript,enzyme,Javascript,Reactjs,Typescript,Enzyme,我使用React with Typescript,并使用Jest和Ezyme进行单元测试。我正在尝试对以下组件进行单元测试(当然是简化的): 这两项测试都失败了。我正在测试的其他React组件通过得很好,但这一个没有通过。任何帮助都将不胜感激。需要注意的是,这一点过去很有效,但当我将代码迁移到使用TypeScript时,这两个测试失败了 更新 在一些实验之后,如果我测试Image标记而不是Image1或Image2是否存在,它会起作用。它似乎不识别功能组件,而是识别其子组件?我在这里感到困惑。我

我使用React with Typescript,并使用Jest和Ezyme进行单元测试。我正在尝试对以下组件进行单元测试(当然是简化的):

这两项测试都失败了。我正在测试的其他React组件通过得很好,但这一个没有通过。任何帮助都将不胜感激。需要注意的是,这一点过去很有效,但当我将代码迁移到使用TypeScript时,这两个测试失败了

更新


在一些实验之后,如果我测试
Image
标记而不是
Image1
Image2
是否存在,它会起作用。它似乎不识别功能组件,而是识别其子组件?我在这里感到困惑。我如何测试它是否是特定的
Image1
Image2
,而不只是测试
Image
?同样,这在Javascript中起作用,但在TypeScript中不起作用。

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

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


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

所有的预期都失败了吗?@eramit2010 oops抱歉,我忘了指出预期失败的地方。我已经更新了我的原始帖子。你能尝试导入Image1和Image2,然后找到导入的组件而不是字符串吗。这是一个很好的解决方案,但有时它对我很有效。@eramit2010嘿,你和我发现了同样的解决方案!如果你想写一个解决方案,我很乐意接受,并给予你信任。我在过去也遇到过同样的问题,导入组件是可行的。
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
    });
});
expect(enzymeWrapper.find('Image1')).toHaveLength(1); // fails
expect(enzymeWrapper.find(Image1)).toHaveLength(1); // passes