使用 jest mount 在子组件中传递道具

Question

我正在尝试构建一个小应用程序来测试我的笑话和酶知识。但是，我运行遇到了问题。

我有以下 Homepage.js:

const Homepage = props => {
    const [input, setInput] = React.useState({
        type: 'input',
        config: {
            required: true,
            placeholder: 'Type a GitHub username'
        },
        value: ''
    });
    
    const onChangeInput = event => {
        setInput(prevState => {
            return {
                ...prevState,
                value: event.target.value
            };
        });
    };
 
    return (
        <section className={styles.Homepage}>
            <form className={styles.SearchBox} onSubmit={(event) => props.getUser(event, input.value)} data-test="component-searchBox">
                <h4>Find a GitHub user</h4>
                <Input {...input} action={onChangeInput}/>
                {props.error ? <p>{`Error: ${props.error}`}</p> : null}
                <Button>Submit</Button>
            </form>
        </section>
    );
};

我想测试输入字段在我输入时是否触发一个函数。 Input.js 组件如下：

const input = props => {
    switch (props.type) {
        case 'input':
            return <input className={styles.Input} {...props.config} value={props.value} onChange={props.action} data-test="component-input"/>
        default: return null;
    };
};

你可以在下面找到我的测试：

const mountSetup = () => {
    const mockGetUser = jest.fn()
    return mount(
        <Homepage type='input' getUser={mockGetUser}>
            <Input type='input'/>
        </Homepage>
    );
};
 
test('State updates with input box upon change', () => {
    const mockSetInput = jest.fn();
    React.useState = jest.fn(() => ["", mockSetInput]);
 
    const wrapper = mountSetup();
 
    const inputBox = findByTestAttr(wrapper, 'component-input');
 
    inputBox.simulate("change");
 
    expect(mockSetInput).toHaveBeenCalled();
});

这里的问题是，在 Input.js 中，开关总是返回 null，即使我传递的是 props type='input'。因此，我得到错误方法“模拟”意味着在 1 个节点上运行。找到 0 个。

有人可以帮我解决这个问题吗？

谢谢

Answer 1

您无需在主页中传递输入。主页有 input child 并且呈现

<Homepage type='input' getUser={mockGetUser}>
</Homepage>

您可以尝试在 React Usestate 模拟中传递数据。

React.useState = jest.fn(() => [{
  type: 'input'
}, mockSetInput]);

使用 jest mount 在子组件中传递道具

Passing props in a child component using jest mount

reactjs

jestjs

enzyme