Javascript 反应：如何测试组件'；s使用ref的输入？

我有一个用于搜索主题的组件：

class Search extends React.Component {
    constructor(props) {
        super(props);

        this.subjectNameInput = React.createRef();
        this.searchSubjectsByName = this.searchSubjectsByName.bind(this);
    }

    searchSubjectsByName(e) {
        console.log("INPUT", this.subjectNameInput.current.value); <--- empty value
        console.log("INPUT", e.target.value); <--- correct value
        this.props.searchSubjectsByName(this.subjectNameInput.current.value);
    }

    render() {
        return (
            <div className="input-group mb-3">
                <div className="input-group-prepend">
                    <span className="input-group-text" id="basic-addon1">Search</span>
                </div>
                <input onChange={(e) => this.searchSubjectsByName(e)} ref={this.subjectNameInput} type="text" className="form-control" placeholder="Subject name" aria-label="subject"
                       aria-describedby="basic-addon1"/>
            </div>
        )
    }
}

const mapDispatchToProps = (dispatch) => ({
    searchSubjectsByName(pattern) {
        dispatch(searchSubjectsByName(pattern))
    }
});

const SearchContainer = connect(null, mapDispatchToProps)(Search);

export default SearchContainer;

类搜索扩展了React.Component{
建造师（道具）{
超级（道具）；
this.subjectNameInput=React.createRef（）；
this.searchSubjectsByName=this.searchSubjectsByName.bind（this）；
}
searchSubjectsByName（e）{
log（“输入”，this.subjectNameInput.current.value）({
searchSubjectsByName（模式）{
分派（searchSubjectsByName（模式））
}
});
const SearchContainer=connect（null，mapDispatchToProps）（搜索）；
导出默认搜索容器；

我有一些测试：

describe("Search component spec", () => {
    const middlewares = [thunk];
    const mockStore = configureStore(middlewares);

    ...

    it('emit SEARCH_SUBJECTS_BY_NAME event', () => {
        const expectedActions = [
            {type: types.SEARCH_SUBJECTS_BY_NAME, pattern: 'sample'},
        ];

        const store = mockStore();
        const wrapper = mount(<Provider store={store}><SearchContainer/></Provider>);
        wrapper.find('input').simulate('change', {target: {value: 'sample'}});
        expect(store.getActions()).toEqual(expectedActions)
    });
});

description（“搜索组件规范”，（）=>{
const middleware=[thunk]；
const mockStore=configureStore（中间件）；
...
它（'emit SEARCH_SUBJECTS_BY_NAME event'，（）=>{
常数预期动作=[
{type:types.SEARCH_SUBJECTS_BY_NAME，pattern:'sample'}，
];
常量存储=mockStore（）；
const wrapper=mount（）；
find（'input'）.simulate（'change'，{target:{value:'sample'}）；
expect（store.getActions（））.toEqual（expectedActions）
});
});

当模拟动作

change

时，我从

this.subjectNameInput.current.value

中获得一个空值，但如果我尝试从ref而不是事件的target

e.target.value

中获得值，则我会得到正确的值

---

如何正确地为使用ref作为输入的组件编写测试？

似乎要更改react的ref，需要使用

getDOMNode（）

it('emit SEARCH_SUBJECTS_BY_NAME event', () => {
    const expectedActions = [
        {type: types.SEARCH_SUBJECTS_BY_NAME, pattern: 'sample'},
    ];

    const store = mockStore();
    const wrapper = mount(<Provider store={store}><SearchContainer/></Provider>);
    const input = wrapper.find('input');

    input.getDOMNode().value = 'sample';
    input.simulate('change');

    expect(store.getActions()).toEqual(expectedActions)
});

it（'emit SEARCH\u SUBJECTS\u BY\u NAME event'，（）=>{
常数预期动作=[
{type:types.SEARCH_SUBJECTS_BY_NAME，pattern:'sample'}，
];
常量存储=mockStore（）；
const wrapper=mount（）；
const input=wrapper.find（'input'）；
input.getDOMNode（）.value='sample'；
输入。模拟（“更改”）；
expect（store.getActions（））.toEqual（expectedActions）
});