Question

我有以下表格：

<form onSubmit={ this.handleSubmit } className="form-login">
    <ul>
        <li className="rel">
            <div className="icon-user-circle-o"></div>
            <input type="text" id="input-auth-username" placeholder="username" />
        </li>
        <li className="rel">
            <div className="icon-lock"></div>
            <input type="password" id="input-auth-password" placeholder="password" />
        </li>
        <li>
            <button className="btn-green" type="submit">Login</button>
        </li>
    </ul>
</form>

我当前的测试

第一次测试通过，这是我目前无法写的第二次测试。

describe('User Login', () => {
    it('should fail if no credentials are provided', () => {
        const fakeEvent = { preventDefault: () => '' };
        expect(loginComponent.find('.form-login').length).toBe(1);
        loginComponent.find('.form-login').simulate('submit', fakeEvent);
        expect(loginComponent.find(Notification).length).toBe(1);
        // console.log(loginComponent.debug());
    });

    it('should log user into dashboard if correct credentials are provided', () => {
        const credentials = { username: 'joe', password: 'myspecialpassword' };

    });
});

我想测试表单提交，但我首先需要在#input-auth-username和#input-auth-password输入字段中输入文字。

如何使用 Enzyme ？

进行此操作

Answer 1

仍在等待更好的答案，但感谢此链接https://github.com/airbnb/enzyme/issues/76

能够使用以下代码

完成输入表单输入的文本

it('input fields should be filled correctly', () => {
    const credentials = { username: 'leongaban', password: 'testpass' };
    expect(loginComponent.find('#input-auth-username').length).toBe(1);

    const usernameInput = loginComponent.find('#input-auth-username');
    usernameInput.value = credentials.username;
    expect(usernameInput.value).toBe('leongaban');

    const passwordInput = loginComponent.find('#input-auth-password');
    passwordInput.value = credentials.password;
    expect(passwordInput.value).toBe('testpass');
});

如何在React / Jest / Enzyme浅层渲染测试期间将文本输入到表单中？

我当前的测试

1 个答案: