使用 React 和 Enzyme 测试设置文本值

Question

如何设置文本输入的文本，然后使用 React / Enzyme 测试其值？

const input = wrapper.find('#my-input');

input.simulate('change',
  { target: { value: 'abc' } }
);

const val = input.node.value;

//val is ''

这里所有的解决方案似乎都不起作用..

Answer 1

要真正了解代码中发生的情况，查看组件代码（特别是您的

onChange

处理程序）会很有用。

但是，对于以下代码：

input.simulate('change', {target: {value: 'abc'}});

这实际上不会改变您的

<input />

元素的值，而只会导致您的

onChange

函数运行并提供一个看起来像

{target: {value: 'abc'}}

的事件对象。

这个想法是你的

onChange

函数会更新你的状态或存储，所以触发这个函数应该会导致你的 DOM 被更新。如果您实际上没有使用

onChange

定义的

input.simulate('change')

处理程序，则不会执行任何操作。

因此，如果你的目标是实际设置输入的值而不触发

onChange

处理程序，那么你可以使用 JS 来使用

wrapper.find('#my-input').node.value = 'abc';

之类的东西手动更新 DOM，但这会绕过 React 的渲染周期，你将如果您执行任何操作来触发重新渲染，则可能会看到该值被清除/删除。

Answer 2

我在这里使用

React 16

和

Enzyme 3.10

，这对我来说完全有效（在尝试了太多不同的建议之后）：

wrapper.find("input").instance().value = "abc";

显然，在以前的版本中，您可以使用

node

或

getNode()

代替

instance()

，这是我之前多次尝试的一部分。

Answer 3

这适用于酶 3 和酶 2：

wrapper.find('input').getDOMNode().value = 'new value';
wrapper.find('input').simulate('change');

.getDOMNode()

可以像酶 2 中的

.node

一样使用，也可以像酶 3 中的

.instance()

一样使用。

Answer 4

如果使用 TypeScript，您可以执行以下操作

wrapper.find('input').getDOMNode<HTMLInputElement>().value = 'new value';
wrapper.find('input').simulate('change');

Answer 5

这对我有用..

我更改了输入文本，并更新了值。 并且更新我的 DOM 属性。

.update()

更新后，我正在检查按钮禁用属性以及输入手机号码长度用例。

const input = MobileNumberComponent.find('input')
input.props().onChange({target: {
   id: 'mobile-no',
   value: '1234567900'
}});
MobileNumberComponent.update()
const Footer = (loginComponent.find('Footer'))
expect(Footer.find('Buttons').props().disabled).equals(false)

Answer 6

我发现我必须使用 Jest 的假时间来为我的 React onChange 函数提供运行时间并记下文本输入的新值。这是完整的测试（不过，没有设置），使用 React、jest 和酶：

describe('Modal with text input', () => {
  beforeEach(() => {
    jest.useFakeTimers();
  });

  afterEach(() => {
    jest.clearAllTimers();
    jest.useRealTimers();
  });

  it('enter email, get email tag', () => {
    const modal = render();
    let textField = modal.find('input[data-test-id="assignAlertInput"]');
    let tags = modal.find('[className*="spectrum-Tag--removable"]');

    // initial load
    expect(textField.prop('value')).toBe('');
    expect(tags).toHaveLength(3);

    // "write" in the input
    textField.simulate('click');
    textField.simulate('change', { target: { value: '[email protected]' } });

    // enact the writing for jest
    jest.advanceTimersByTime(150);
    modal.update();
    textField = modal.find('input[data-test-id="assignEmailInput"]');
    tags = modal.find('[className*="spectrum-Tag--removable"]');

    expect(textField.prop('value')).toBe('[email protected]');
    expect(tags).toHaveLength(3);
    const expected = ['[email protected]', '[email protected]', '[email protected]'];
    tags.forEach((tag, i) => expect(tag.contains(expected[i])).toBe(true));

    // enact the onBlur function that sets tags
    textField.simulate('blur');
    modal.update();
    textField = modal.find('input[data-test-id="assignEmailInput"]');
    tags = modal.find('[className*="spectrum-Tag--removable"]');

    expect(textField.prop('value')).toBe('');
    expect(tags).toHaveLength(4);
    expected.push('[email protected]');
    tags.forEach((tag, i) => expect(tag.contains(expected[i])).toBe(true));
  });
});