时间戳

首页 > 解决方案 > React - 测试元素是否设置了“禁用”

reactjs - React - 测试元素是否设置了“禁用”

问题描述

我有一个提交按钮，当表单字段不包含有效数据时它被禁用，当数据正确时它被启用。我正在使用“useEffect”挂钩来检查表单的状态并更新确定disabled是真还是假的变量。

useEffect(() => {
    if(...) {
            setValues({...values, isFormValid: true});
    }
}, [values]);

该disabled属性根据其值更改values.isFormValid

<Box m={2}>
  <Button variant="contained"
    type="submit"
    disabled={!values.isFormValid}
>
    Register
  </Button>
</Box>

当我运行测试时，该disabled属性始终存在，即使按钮已启用并且“isFormValid”为真。实际上，在 DOM 中，该disabled属性被删除，但测试失败。

import React from 'react';
import { shallow } from 'enzyme';
import Registration from './Registration';

describe('Form', () => {
  const wrapper = shallow(<Registration />);
...............

it('should have two password fields', () => {
  expect(wrapper.find('[type="password"]').length).toEqual(2);
});

it('should enable the submit button if all the conditions are correct', () => {
    wrapper.find('[type="text"]').at(0).simulate('change', { target: { value: 'John' } });
    wrapper.find('[type="text"]').at(1).simulate('change', { target: { value: 'Doe' } });
    wrapper.find('[type="email"]').at(0).simulate('change', { target: { value: 'test@mail.com' } });
    wrapper.find('[type="password"]').at(0).simulate('change', { target: { value: '1qaz' } });
    wrapper.find('[type="password"]').at(1).simulate('change', { target: { value: '1qaz@WSX' } });
    wrapper.update();

    expect(wrapper.find('[type="text"]').at(0).prop('value')).toEqual('John');
    expect(wrapper.find('[type="text"]').at(1).prop('value')).toEqual('Doe');
    expect(wrapper.find('[type="email"]').at(0).prop('value')).toEqual('test@mail.com');
    expect(wrapper.find('[type="password"]').at(0).prop('value')).toEqual('1qaz');
    expect(wrapper.find('[type="password"]').at(1).prop('value')).toEqual('1qaz@WSX');

    //  TODO: After the fields are set correctly, the submit button should be enabled (disabled should be Falsy)
    // expect(wrapper.find('[type="submit"]').at(0).prop('disabled')).toBeTruthy();
    expect(wrapper.find('[type="submit"]').first().getDOMNode()).toHaveProperty('disabled');
  });

如何测试disabled属性是否仍然存在于 DOM 中？请指教。谢谢！

标签： reactjsenzyme

解决方案

如果您正在使用jest-dom，您可以使用toBeDisabled()matcher 来测试输入元素是否被禁用。

expect(button).toBeDisabled()

推荐阅读