Question

由于我使用无状态功能，我不能使用它：

wrapper.find('input').instance().value = 'some text'

这也是贬低的：

wrapper.find('input').node.value = 'some text'

你知道什么是适当的方式来实现这个目标吗？我对测试不熟悉，如果我错了，请纠正我：

我使用const component = mount(<PostMessages/>)创建了组件。
我将文字输入定位为：const input = component.find('input')。
这是我失去的和平。

我的组件：

const PostMessage = props => {
    let inputText;

    const onKeypressHandler = (e) => {
        if (e.key === 'Enter') {
            if (inputText.value) {
                sendMessage(inputText.value);
                clearInput();
            }
        }
    }

    const clearInput = () => {
        inputText.value = '';
    }

    const setRef = (input) => {
        if (input) {
            inputText = input;
            inputText.focus();
        }
    }

    const stringIsBlank = (str) => {
        return (!str || /^\s*$/.test(str));
    }

    const formatMessage = (message) => {
        return stringIsBlank(message) ? false : message.trim();
    }

    const sendMessage = (message) => {
        const formatedMessage = formatMessage(message);

        if(formatedMessage) {
            props.send(formatedMessage);
        }
    }

    return (
        <PostMessageStyle>
            <input type="text"
                placeholder="Your message..."
                onKeyPress={onKeypressHandler}
                ref={input => setRef(input)}
            />
            <button onClick={sendMessage}>Send</button>
        </PostMessageStyle>
    )
};

Answer 1

您正确执行wrapper.find('input').instance().value = 'some text'，但您还需要在输入上触发更改事件。你可以这样做：

const myInput = wrapper.find('input');
myInput.instance().value = 'some text';
myInput.simulate('change');

或者您也可以使用以下值直接触发change事件：

wrapper.find('input').simulate('change', { target: { value: 'some text' } });

这仅适用于组件，而不适用于功能。没有办法这样做，因为无状态组件没有方法。来自图书馆的创造者：

答案是您不测试该功能 - 您只测试Component，并为所有代码路径添加测试。你无法直接测试，也不应该。

如果要测试它，则必须将其转换为组件。

如何在Jest测试中为无状态函数的输入文本元素设置值

1 个答案: