用酶模拟功能组件的输入变化

Question

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

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');
  });
});

感谢您的帮助！

Answer 1

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

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

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

用酶模拟功能组件的输入变化

Simulating input change in functional component with Enzyme

unit-testing

reactjs

jestjs

enzyme