Question

我的react组件包含以下代码

   app.get('/', (req, res) => {
    // res.render('login');
    var data = knex.select('*').from('RegisterData');
    res.send(data)
    console.log(data); 
});

如您所见，handleChange函数会在输入更改时触发，并从那里更新状态。

如何使用酶进行测试？我尝试过

 handleChange = e => {
    this.setState({
      num: e.target.value
    });
  };

  render() {
    return (
      <div>
        <h2>Delete cat :(</h2>
        <input
          onChange={this.handleChange}
          type="number"
          placeholder="enter id here"
        />
        <button id="deleteBtn" onClick={this.deleteOne}>
          Delete
        </button>
      </div>
    );
  }
}

我不得不尝试将其包装在商店中，因为我正在使用Redux并导出连接的组件。我过去一个小时一直在Google上搜索，尝试了各种尝试，但未能通过此测试。请发送帮助:)欢呼声

PS：我已经测试了按钮单击后无后顾之忧，因为它只运行一个功能（无状态更新）。

Answer 1

我通常导出连接的组件以供应用程序使用，并导出组件本身以进行测试。

好像您有一个小错字，通过{ target: { value: 2 } }作为您的活动。

这是一个基于您提供的代码的有效示例：

import * as React from 'react';
import { shallow } from 'enzyme';

class DeleteOne extends React.Component {

  handleChange = e => {
    this.setState({
      num: e.target.value
    });
  };

  render() {
    return (
      <div>
        <h2>Delete cat :(</h2>
        <input
          onChange={this.handleChange}
          type="number"
          placeholder="enter id here"
        />
        <button id="deleteBtn" onClick={this.deleteOne}>
          Delete
      </button>
      </div>
    );
  }
}

it("Updates the state", () => {
  const wrapper = shallow(<DeleteOne />);
  const input = wrapper.find("input");
  input.simulate("change", { target: { value: 2 } });  // 'value' instead of 'num'
  expect(wrapper.state().num).toEqual(2);  // SUCCESS
});

使用Enzyme和Jest在React中测试句柄更改功能

1 个答案: