OnSelect 检查测试 jest/enzyme

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/enzyme 测试此组件，如下所示：

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

    });

});

我不确定我应该如何 'spying' onSelect 按钮。我要求代码覆盖率至少为 80% 或更高，这涉及确保函数 handTextUpdate(...) 被正确调用。

似乎会引起问题，它警告我这不是一个行为(...)，但当我这样做时，它仍然抱怨同样的问题。

任何建议，或者如果有人可以编写一个简单的测试示例，这会很棒吗？

感谢您的帮助。

雅各

Answer 1

我得出的答案如下：

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

OnSelect 检查测试 jest/enzyme

OnSelect check testing jest/enzyme

reactjs

jestjs

enzyme