Reactjs OnSelect检查测试笑话/酶

Reactjs OnSelect检查测试笑话/酶,reactjs,jestjs,enzyme,Reactjs,Jestjs,Enzyme,我有以下内容: 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': ['

我有以下内容:


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;

似乎引起了问题,这是在警告我,这不是一个行为(…),但当我这样做时,它仍然抱怨同一个问题

有什么建议或者如果有人能写一个简单的测试例子,这将是美妙的请

谢谢你的帮助


雅各布

我的答案如下:

        it('should select a dropdown option', () => {
            act(() => {
                wrapper.find('#font-family').at(0).prop('onSelect')('Arial', 'font-family');
                expect(document.getElementById('testing-please').classList.contains('font-family-Arial')).toBeTruthy();
            });
        });
        it('should select a dropdown option', () => {
            act(() => {
                wrapper.find('#font-family').at(0).prop('onSelect')('Arial', 'font-family');
                expect(document.getElementById('testing-please').classList.contains('font-family-Arial')).toBeTruthy();
            });
        });