OnSelect检查测试笑话/酶

Question

我下面有这个组件：

import React, {useState} from 'react';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown';
const dict = {
'font-family': ['Arial', 'Arial Black',  'Verdana'],
'font-size': ['6', '8', '10', '11', '12', '13', '14', '16', '18', '20'],
}
const DropDown = (props) => {
const [selected, setSelected] = useState(props.value);
const [fontFamilyChoice, setFontFamilyChoice] = useState('font-family-Times-New-Roman');
const handleTextUpdate = (cssClass, cssProperty, cssValue) => {
setSelected(cssValue);
if (cssProperty === 'font-family') {
//removes default or current css font family class stored in the state
$('.' + cssClass).removeClass(fontFamilyChoice);
//value has spaces replaced with - for the new font family class, created in the _functions.scss file
let updateValue = 'font-family-' + cssValue.replace(/ /g, '-');
setFontFamilyChoice(updateValue);
$('.' + props.classToUpdate).addClass(updateValue);
} else if (cssProperty === 'font-size') {
$('.' + cssClass).css({'fontSize': cssValue / 16 + 'em'});
}
}
return (
<div>
<DropdownButton style={{fontFamily: selected}}
className={props.className}
id={props.name}
title={selected}
onSelect={event => handleTextUpdate(props.classToUpdate, props.name, event)}>
{dict[props.name].map((e) => {
return <Dropdown.Item
style={{fontFamily: props.name === 'font-family' ? e : 'Arial'}}
key={e}
eventKey={e}>{e}
</Dropdown.Item>
})}
</DropdownButton>
</div>)
}
export default DropDown;

我希望使用jest/酶测试该成分，如下所示：

import React from 'react';
import Dropdown from './DropDown';
describe('Test dropdown component', () => {
//name -- either: 'font-family' or 'font-size'
const setupUnitTesting = (name, props = {
value: 'Arial',
classToUpdate: 'test-class',
name: name,
bootstrapGrid: 'col-3',
}) => {
// return shallow(<Dropdown {...props} />);
const div = createDivBody('test-class', 'testing-please');
document.body.appendChild(div);
return mount(<Dropdown {...props} />, {attachTo: document.getElementById('container')});

}
describe('Unit testing font-family', () => {
let wrapper;
beforeEach(() => {
wrapper = setupUnitTesting('font-family');
});
afterEach(() => {
wrapper = null;
});
it('should render correctly', () => {
expectSnapshot(wrapper);
});
// my issue is with this test here
it('should select a dropdown option', () => {
wrapper.find('#font-family').at(0).prop('onSelect')('test-class', 'font-family', 'Arial')
expect(document.getElementById('testing-please').classList.contains('font-family-Arial')).toBeTruthy();

});
});
describe('Unit testing font-size', () => {
let wrapper;
beforeEach(() => {
wrapper = setupUnitTesting('font-size');
});
afterEach(() => {
wrapper = null;
});
it('should render correctly', () => {
expectSnapshot(wrapper);
});
});
});

我不确定我应该如何"监视"onSelect按钮。我要求代码覆盖率至少为80%或以上，这涉及到确保正确调用函数handTextUpdate(...)。

似乎是在引发问题，它警告我这不是围绕一个行为(…(进行的，但当我这样做时，它仍然抱怨同样的问题。

有什么建议吗？或者如果有人能写一个简单的测试示例，这将非常棒？

谢谢你的帮助。

Jacob

Answer 1

我得到的答案如下：

PD_4