用 Enzyme 模拟功能组件的输入变化答案

【问题标题】：Simulating input change in functional component with Enzyme用 Enzyme 模拟功能组件的输入变化
【发布时间】：2020-10-19 14:16:31
【问题描述】：

我在测试这个组件时遇到了一些问题：

import React, { useState } from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';

import styles from './Join.module.scss';

const Join = () => {
  const [name, setName] = useState('');
  const [room, setRoom] = useState('');

  const handleChange = (e) => {
    if (e.target.name === 'name') {
      setName(e.target.value);
    } else if (e.target.name === 'room') {
      setRoom(e.target.value);
    }
  };

  return (
    <section className={styles.main}>
      <h1 className={styles.main__title}>Join</h1>
      <form className={styles.form}>
        <label className={styles.form__label}>Name</label>
        <input
          className={styles.form__input}
          name="name"
          type="text"
          onChange={handleChange}
        />
        <label className={styles.form__label}>Room</label>
        <input
          className={styles.form__input}
          name="room"
          type="text"
          onChange={handleChange}
        />
      </form>
      <Router>
        <Link
          onClick={(e) => (!name || !room ? e.preventDefault() : null)}
          to={`/chat?name=${name}&room=${room}`}
        >
          <button className="btn btn--submit" type="submit">
            Sign In
          </button>
        </Link>
      </Router>
    </section>
  );
};

export default Join;

我想模拟输入 name="name" 的变化，但测试一直失败，因为结果始终是 "" 而不是 foo。

谁能向我解释我做错了什么？我一直在寻找没有运气的解决方案。

这是测试文件：

import React from 'react';
import { mount } from 'enzyme';

import Join from '../Join';

describe('<Join />', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = mount(<Join />);
  });

  test('1- renders without errors and matches h1', () => {
    const title = wrapper.find('h1');

    expect(title.text()).toBe('Join');
  });

  test('2- name input', () => {
    const name = wrapper.find('[name="name"]');
    console.log(name.debug());

    name.simulate('change', {
      target: { value: 'foo' },
    });

    expect(name.text()).toBe('foo');
  });
});

感谢您的帮助！

【问题讨论】：

模拟触发？您是否尝试将console.log 放入handleChange 中？
你需要模拟 useState
handleChange 仅检查 name 和 room。这样你总是会得到默认值。

标签： reactjs unit-testing jestjs enzyme

【解决方案1】：

Enzyme 没有为反应钩子提供适当的支持。 https://enzymejs.github.io/enzyme/#react-hooks-support

您可以将 react-dom/test-utils 与酶一起使用。示例https://enzymejs.github.io/enzyme/#reacttestutilsact-wrap

但建议使用React Testing Library以获得更好的支持。

【讨论】：