如何正确测试反应组件？答案

【问题标题】：How to test react component correctly?如何正确测试反应组件？
【发布时间】：2017-12-04 03:36:53
【问题描述】：

最近我正在学习用玩笑和酶来测试 React，我的代码似乎很难理解它是什么单元测试

import React from "react";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      value: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    const value = e.target.value;
    this.setState({
      value
    });
  }
  render() {
    return <Nest value={this.state.value} handleChange={this.handleChange} />;
  }
}

export const Nest = props => {
  return <input value={props.value} onChange={props.handleChange} />;
};

export default App;

和我的测试

import React from "react";
import App, { Nest } from "./nest";

import { shallow, mount } from "enzyme";

it("should be goood", () => {
  const handleChange = jest.fn();
  const wrapper = mount(<App />);
  wrapper.find("input").simulate("change", { target: { value: "test" } });
  expect(handleChange).toHaveBeenCalledTimes(1);
});

IMO，被嘲笑的handleClick 将拦截App 上的handleClick，

如果这完全错误，那么使用 mock fn 并测试被调用的 handleClick 的正确方法是什么。

另一个：我搜了很多，看了类似的情况，好像是contra-Unit Test，
可能我应该分别测试这两个组件，我可以测试两个组件，测试
<Nest value={value} handleChange={handleChange} />
通过手动传递道具，然后通过模拟changehandleChangeinvoked@
它通过了测试。
但是如何测试两者之间的连接？我读了

有些工作是 React 团队的工作 ...

我不知道在这种情况下我必须测试哪些部分，以及哪些部分react 已经测试并且不需要我测试。这令人困惑。

【问题讨论】：

标签： unit-testing reactjs testing jestjs enzyme

【解决方案1】：

如果你想测试连接。在我看来，nest 组件是 App 组件中的一个子组件。您可以测试 <App /> 是否包含 `。

describe('<App />', () => {
  it('should contain a nest component', () => {
    const wrapper = mount(<App />);
    expect(wrapper.find(<Nest />)).toHaveLength(1);
  });
});

其次，由于嵌套组件上的 onChange 事件会更新 App 组件中的状态，因此您还可以测试状态更改，因为这是您所期望的行为。

it('should update state', () => {
  //find input and simulate change with say {value: 'new value'} and then
  expect(wrapper.state().value).toBe('newValue');
});

我希望这会有所帮助。

【讨论】：

【解决方案2】：

您应该首先单独测试Nest 组件，将模拟的handleChange 作为道具传递，以验证输入更改是否正在传播。

如果您想测试状态部分，那么您可以从酶中获取您的 App 类的instance 并直接调用该方法：

it("should update the Nest value prop when change is received", () => {
  const wrapper = mount(<App />);
  const instance = wrapper.instance()
  instance.handleChange( { target: { value: "test" } })
  const nestComponent = wrapper.find("Nest").first()      
  expect(nestComponent).prop('value').toEqual('test');
});

这是一个非常非常基本的，几乎不需要测试一段代码，但如果这是您所追求的，它将提高您的测试覆盖率。

例如文档：http://airbnb.io/enzyme/docs/api/ReactWrapper/instance.html

【讨论】：