javascript - react : How to test component's input which uses ref?

Question

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

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;

我有一些测试:

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

当 Action change 被模拟时，我从 this.subjectNameInput.current.value 得到一个空值，但是如果我尝试从 ref 而不是从事件的目标 e.target.value 然后我得到正确的值。

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

Answer 1

似乎要更改 React 的引用，需要使用 getDOMNode().value = ... 然后模拟操作。

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