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

模拟了动作change时，我从this.subjectNameInput.current.value中得到了一个空值，但是如果我尝试不是从ref中而是从事件的目标e.target.value中得到了一个值，则我得到了正确的值

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

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

React：如何测试使用ref的组件的输入？

1 个答案: