Question

我正在尝试使用karma / jasmine为我的反应应用程序执行单元测试。测试是检查状态是否已经改变。我已经通过了几个参考文献，但似乎无法解决问题。此外，spyOn（）和sinon.spy（）给出了错误的输出。

expect(received).toBe(expected)

Expected value to be (using ===):
  true
Received:
  false

测试片段

        it('should call handleUserIdChange', () => {
            const value = '00000000';
            const mountedComponentHandle = mount(<LoginForm />);
            const onChangeUserID = sinon.spy(mountedComponentHandle.instance(), 'handleUserIdChange');
            mountedComponentHandle.update();
            (mountedComponentHandle.find('ValidatedInput').at(0)).simulate('change', value);
            expect(
                onChangeUserID.calledOnce
            ).toBe(true);
        });

为其编写测试的Login.js

class LoginForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userId : '',
            password : '',
            loginType : ['Customer', 'Payer', 'Super-User'],
            userType : 'Customer',
            isLoggedIn : false,
            loginResponse : '',
            FieldsRegister : [],
        }
        this.handleClearForm = this.handleClearForm.bind(this);
        this.handleSubmitForm = this.handleSubmitForm.bind(this);
        this.handleUserIdChange = this.handleUserIdChange.bind(this);
        this.handlePasswordChange = this.handlePasswordChange.bind(this);
        this.handleUserTypeChangeSelect = this.handleUserTypeChangeSelect.bind(this);
        this.handleRegisterFormFields = this.handleRegisterFormFields.bind(this);
    }

    handleUserIdChange(value) {
        this.setState({ userId : value });
    }

    handlePasswordChange(value) {
        this.setState({ password : value });
    }
    ....
    render() {
        return (
            <form className="container form-horizontal"  onSubmit={this.handleSubmitForm}>
              <div className=" pb-10">
                <h2 className="text-center">Login</h2>
              </div>
              <div className='column text-center'>
                <span>{this.state.loginResponse}</span>
              </div>
                <ValidatedInput
                    name={'userId'}
                    type={'text'}
                    title={'User ID'}
                    value={this.state.userId}
                    placeholder={'Enter User ID'}
                    onChange={this.handleUserIdChange}
                    onComponentMounted={this.handleRegisterFormFields}
                    validations={/^[0-9]{4,10}$/}
                    validationError={'This is not valid user Id'}
                    isRequired={true}
                />
....

ValidateInput.js

class ValidatedInput extends Component {
    constructor(props) {
        super(props);

        this.state = {
            validations: this.props.validations,
            validationError: this.props.validationError
        };

        this.handleChangeValue = this.handleChangeValue.bind(this);
        this.isValid = this.isValid.bind(this);
        this.validateInput = this.validateInput.bind(this);
    }

    handleChangeValue(e) {
        this.props.onChange(e.target.value);
        var isValidField = this.isValid(e.target);
    }
....
render () {
        return (
            <div className="form-group">
                <div className="col-5 text-center">
                    <label htmlFor={this.props.name}>{this.props.title}</label>
                </div>
                <div className="col-5 text-center">
                    <input
                        className="form-input text-center"
                        type={this.props.type}
                        ref={this.props.name}
                        name={this.props.name}
                        value={this.props.value}
                        required={this.props.isRequired}
                        placeholder={this.props.placeholder}
                        onChange={this.handleChangeValue}
                    />
                    <span className='Error'></span>
                </div>
            </div>
        );
    }

有关如何检查state.userId是否已更改的任何帮助以及有关如何通过测试的建议？感谢

Answer 1

因此，对于您的测试，您似乎正在尝试查看是否已调用handleUserIdChange。在这种情况下，您需要将handleUserIdChange定义为sinonSpy()并将其传递给LoginForm组件的道具。

it('should call handleUserIdChange', () => {
  const value = '001251623';
  const handleUserIdChangeSpy = sinon.spy();
  const mountedComponentHandle = mount(<LoginForm handleUserIdChange={handleUserIdChangeSpy} />);

  mountedComponentHandle.find('ValidatedInput').at(0).simulate('change', value)

  expect(handleUserIdChangeSpy.calledOnce).toBe(true);
});

至于你底部的问题，如果你想检查并查看状态是否在调用后更新，你可以简单地模拟输入并在调用函数或与之交互后使用.state()检查状态你的组件应该/不应该影响状态。

it('should update userId', () => {
   const mountedComponentHandle = mount(<LoginForm />);
   const value = '001251623';

   mountedComponentHandle.find('ValidatedInput').at(0).simulate('change', value)
   expect(mountedComponentHandle.state().userId).to.equal(value);
});

Answer 2

我发现了错误及其原因。 Refer this for explanation

更新了test-snippet：

it('should call handleUserIdChange', () => {
    const value = '00000000';
    const mountedComponentHandle = mount(<LoginForm />);
    const onChangeUserId = sinon.spy(mountedComponentHandle.instance(), 'handleUserIdChange');
    mountedComponentHandle.update();
    mountedComponentHandle.find('input').at(0).simulate('change', value);
    expect(
        onChangeUserId.called
    ).toBe(true);
});

我们需要获取原生元素input来模拟输入字段中的更改。

Answer 3

如果对某人有价值，我会遇到这个问题，可以通过使用酶中的“ mount”而不是“ shallow” 来解决。更改后，模拟“更改”将正常工作。

Answer 4

而不是寻找组件显示名称O(nlog7n)，传入组件（构造函数）本身.find('ValidatedInput')

酶模拟。（＆＃39;改变＆＃39;，事件）不起作用

4 个答案: