我的笑话单元测试用例因 Material UI 多选而失败

Question

我正在尝试为材质 UI 多选编写单元测试用例。

父组件代码是-

import {myData} from '../constant';
export const Parent = () => {    
 const onChangeStatus= (selectedValues: Array<string>) => {
        setTest({
                   ...test,
                   values: selectedValues
                });
    }      
  return (
            <Child
                onChange={onChangeStatus}
                myData={test}
            />
    );      
}

子组件代码是 -

import React from 'react'
export interface ChildProps {
    onChangeStatus: (values: Array<string>) => void;
    myData?: Array<Test<string, string>> | null;
}

export const Child = ({onChangeStatus , myData}: ChildProps) => {  
  return (
        <div>
            <MultiSelect
                multiple
                native
                value={myData.val}
                onChange={(event: React.ChangeEvent<HTMLSelectElement>): void => {
                        const { selectedOptions } = event.target;
                        let values: string[] = Array.from(selectedOptions).map(selectedOption => selectedOption.value);
                        onChangeStatus(values);
                         }}>
                            {myData &&
                                myData.multiSelectData &&
                                myData.multiSelectData.map(
                                    (item: Test<string, string>) => (
                                        <option key={item.key} value={item.value}>
                                            {item.key.replace('_',' ')}
                                        </option>
                                    )
                                )}
                        </MultiSelect>
        </div>
    );
    
}

这是我写的测试用例-

it('should call onChange handler when test multi select is selected', () => {
        const event = {target: { value: 'All', key: 'All' }};
        wrapper
            .find(MultiSelect)
            .first()
            .props()
            .onChange('test', event);
        expect(mockOnChange).toHaveBeenCalled();
    });

这个测试用例失败了。出现错误，例如 - TypeError: Cannot read property 'selectedOptions' of undefined。此功能的代码也不包括在内。 谁能帮助我通过测试用例并获得 100% 的多选代码覆盖率。

Answer 1

你应该使用onChange(event)，而不是test 字符串，因为你的函数只接收一个prop，而不是两个。

在测试中模拟的event 还有另一个问题。您需要定义 selectedOptions 属性，因为您在组件中使用它。像这样的：

const event = {target: { selectedOptions: [{ value: 'All', key: 'All' }] } };

另外，关于你的测试，你可以通过检查你的模拟函数被调用的参数来改进它。它将验证您是否将正确的值传递给它。像这样的：

expect(mockOnChange).toHaveBeenCalledWith(['All']);