如何正确测试反应组件？

Question

最近我正在学习用jest和酶来测试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);
});

国际海事组织，被嘲笑的handleClick将拦截handleClick上的App，

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

另：我搜索了很多，看了类似的情况，看起来像这是iscontra-Unit Test， 可能我应该分别测试两个组件，我可以测试两个组件，测试 <Nest value={value} handleChange={handleChange} /> 通过手动传递道具，然后通过模拟handleChange changeinvoked 它通过了测试。 但是我怎样才能测试两者之间的联系呢？我读

一些工作是React Team的工作......

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

Answer 1

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

如果你想测试状态部分，那么你可以从酶获取你的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

---

Answer 2

如果要测试连接。从我看到，嵌套组件是App组件内的子组件。你可以测试<App />包含`。

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

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

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

我希望这有帮助。