测试一个传入了 prop(className) 的简单按钮组件，并检查 className 是否存在于文档中？ Jest/React

Question

您好，我有一个简单的 ButtonComponent 我想测试一下

const ButtonComponent = ({ label, iconName }) => (
    <Button>
        <Icon name={iconName} />
    </Button> 
);

iconName props 是可选的，所以我想创建一个测试来检查 iconName 是否在 props 中传递 & 如果是，则为组件中存在的图标名称。

下面的代码是我试过的，但是测试没有通过，因为 received value must be an HTMLElement or an SVGElement. Received has value: null。我想通过添加 iconName 来更新 testProps，然后测试它是否存在。我是测试新手 - 非常感谢

import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import { render } from '@testing-library/react'

const testProps = {
    label: 'test label'
}

test('action button renders with iconName props if passed', () => {
    const { rerender} = render(<ButtonComponent {...testProps} />);
    const updatedProps = testProps['iconName'] = 'test-icon-name-prop';
    rerender(<ButtonComponent {...updatedProps} />);
    expect(document.querySelector('.test-icon-name-prop')).toBeInTheDocument();
});

Answer 1

所以问题是我如何将新的属性分配给对象以及 Icon 标签前置 .fa 类名。以下是正确的做法。

 testProps.iconName = 'test-icon-name-prop';
 const updatedProps = testProps;
 rerender(<ButtonComponent {...updatedProps} />);
 expect(document.querySelector('.fa-test-icon-name-prop')).toBeInTheDocument();

测试一个传入了 prop(className) 的简单按钮组件，并检查 className 是否存在于文档中？ Jest/React

Test a simple button component that has a prop(className) passed in and check if the className is present in the document? Jest/React

reactjs

jestjs

react-testing-library