Протестируйте простой компонент кнопки, которому передано свойство (className), и проверьте, присутствует ли className в документе? Jest / React - PullRequest
Новая
       77

Протестируйте простой компонент кнопки, которому передано свойство (className), и проверьте, присутствует ли className в документе? Jest / React

0 голосов
/ 13 июля 2020

Привет, у меня есть простой компонент ButtonComponent, который я хочу протестировать 

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

props iconName не является обязательным, поэтому я хочу создать тест, который будет проверять, передается ли iconName в props, и если это Icon имя, присутствующее в компоненте.

Ниже приведен код, который я пробовал, но тест не проходит, потому что received value must be an HTMLElement or an SVGElement. Received has value: null. Я хочу обновить testProps, добавив iconName, а затем проверить, существует ли он. Я новичок ie с тестированием - Большое спасибо 

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();
});

1 Ответ

0 голосов
/ 14 июля 2020

Итак, проблема заключалась в том, как я назначил объекту новое свойство, а тег Icon добавил .fa имя класса. Ниже приведен правильный способ. 

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