ReactJs MaterialUI - 如何测试选择组件（非本机）的更改？答案

【问题标题】：ReactJs MaterialUI - How do I test change of a select component (non-native)?ReactJs MaterialUI - 如何测试选择组件（非本机）的更改？
【发布时间】：2021-09-20 12:19:26
【问题描述】：

我的应用中有这个简单的组件：

import {Select, MenuItem} from '@material-ui/core';
import {useEffect, useState} from 'react';

export const CountrySelection = ({
  countries,
  selectedCountry,
  onChange,
  id,
  className = ''
})=>{

    const [_selectedCountry, _setSelectedCountry] = useState(null);

    useEffect(()=>{
        _setSelectedCountry(selectedCountry);
    }, [selectedCountry]);

    return(
        <Select 
            value={(_selectedCountry && _selectedCountry.label) || ''}
            onChange={onChange}
            id={id}
            className={'selection ' + className}
            inputProps={{
                'data-testid':'country-selection'
            }}
        >
            {countries.map((c)=><MenuItem 
                key={c.id} 
                value={c.label}
              >{c.label}</MenuItem>
            )}
        </Select>
    )
}

这是我的测试尝试。当我在 Select 组件中更改为不同的选项时，我想测试该组件是否保持正确的值/视觉状态：

afterEach(cleanup);

const setup = () => {

    const countries = [
        {label: "Austria", id: 0, code: 'at'},
        {label: "Denmark", id: 1, code: 'dk'},
        {label: "Germany", id: 2, code: 'de'}
    ];
    const defaultCountry = countries[0];

    const utils = render(
        <CountrySelection 
            countries={countries}
            selectedCountry={defaultCountry}
            id="country-selection"
            onChange={()=>{}}
        />
    );

    return {
        ...utils,
    }
}

test('country selection has correct number of options', async()=>{
    const {getAllByRole, getByText, getByTestId} = setup();

    const selectEl = document.querySelector('#country-selection');
    fireEvent.mouseDown(selectEl);
    const options = getAllByRole('option');
    expect(options.length).toBe(3);
    
    const choice2 = getByText('Denmark');
    expect(choice2.innerHTML).toBe('Denmark<span class="MuiTouchRipple-root"></span>');

    const choice3 = getByText('Germany');
    expect(choice3.innerHTML).toBe('Germany<span class="MuiTouchRipple-root"></span>');

    // how to change the value and query it?
    fireEvent.click(choice3);
    const selection = getByTestId('country-selection');
    expect(selection.value).toBe('Germany'); // doesn't work, value is still "Austria"
})

如何使用 Select 组件执行此操作？我不能使用 native={true} 属性。

（我在这里输入只是为了让堆栈溢出发布验证对代码与其他文本的比例感到满意。只要它不让我发布我的问题，我就会输入。对不起，人类。）

【问题讨论】：

标签： material-ui react-testing-library

【解决方案1】：

如果您只想检查一个国家/地区是否已正确选择，您可以使用userEvent 像真实用户一样选择选项：

import { screen } from '@testing-library/react';

test('country selection has correct number of options', async()=>{
    // Check that the correct number of options are displayed
    const options = screen.getAllByRole('option');
    expect(options.length).toBe(3);

    // Select Denmark
    userEvent.selectOptions(screen.getByRole('combobox'), 'dk');
 
    // Check that Denmark is the selected country
    expect((screen.getByText('Denmark') as HTMLOptionElement).selected).toBe(true);

    // Select Germany
    userEvent.selectOptions(screen.getByRole('combobox'), 'de');
 
    // Check that Germany is now the selected country
    expect((screen.getByText('Denmark') as HTMLOptionElement).selected).toBe(true);

})

【讨论】：