Reactjs 什么'；浅包装和山包装中的酶模拟有什么区别？

以下是我的组件：

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: 'foo'
    };
  }

  onChange = (e) => {
    this.setState({
      value: e.currentTarget.value
    });
  };

  render() {
    return (
      <div className="App">
        <input
          id="foo"
          value={this.state.value}
          onChange={this.onChange}
        />
      </div>
    );
  }
}

---

但是如果我将

mount

更改为

shallow

，它就会通过。我不完全确定原因，我想知道浅层渲染和装载渲染之间是否还有其他实际区别。

要修复测试，您可以尝试：

import { mount } from 'enzyme';

it('fires onChange', () => {
  const wrapper = mount(<App />).find('#foo');

  expect(wrapper.props().value).toBe('foo');

  wrapper.props().onChange({ currentTarget: { value: 'bar' } });

  expect(wrapper.props().value).toBe('bar');
});

从“酶”导入{mount}；
它（'firesonchange'，（）=>{
常量包装器=装入（这基本上是本期评论的副本
我已经多次阅读了该要点，但它没有提及Ezyme的模拟函数。在这种情况下，我猜测测试失败是因为setState是一个异步函数，因此在设置状态之前测试断言…？我会这样做m表示当前组件的dom，而mount表示当前组件及其子组件的dom。
Expected value to be (using ===):
  "bar"
Received:
  "foo"

import { mount } from 'enzyme';

it('fires onChange', () => {
  const wrapper = mount(<App />).find('#foo');

  expect(wrapper.props().value).toBe('foo');

  wrapper.props().onChange({ currentTarget: { value: 'bar' } });

  expect(wrapper.props().value).toBe('bar');
});