Unit testing 如何使用笑话和酶来监视组件willmount

我正在尝试测试是否调用了componentWillMount，因此我的测试是

test('calls `componentWillMount` before rendering', () => {
  let fn = jest.fn(SomeComponent.prototype.componentWillMount)
  mount(<SomeComponent />)
  expect(fn).toHaveBeenCalled()
})

test（'calls`componentWillMount`before rendering'，（）=>{
设fn=jest.fn（SomeComponent.prototype.componentWillMount）
挂载（）
expect（fn）.toHaveBeenCalled（期望）
})

但是，即使调用了componentWillMount方法，测试也不会通过。

---

我在这里遗漏了什么？

我会首先

监视组件的
组件将挂载
方法，但也会使用
和.CallThrough（）
来防止它模仿其内容。希望这有助于：

it('should check that the componentWillMount method is getting called', () => {
    spyOn(SomeComponent.prototype, 'componentWillMount').and.callThrough();

    const wrapper = mount(<SomeComponent />);

    expect(wrapper).toBeDefined();
    expect(SomeComponent.prototype.componentWillMount).toHaveBeenCalledTimes(1);
});

it（'应该检查componentWillMount方法是否被调用'，（）=>{
spyOn（SomeComponent.prototype，'componentWillMount'）和.callThrough（）；
const wrapper=mount（）；
expect（wrapper.toBeDefined（）；
期望（SomeComponent.prototype.componentWillMount）已收集到时间（1）；
});
试试这个：

test('calls `componentWillMount` before rendering', () => {
  const onWillMount = jest.fn();
  SomeComponent.prototype.componentWillMount = onWillMount;
  mount(<SomeComponent />);

  expect(onWillMount).toBeCalled();
});

test（'calls`componentWillMount`before rendering'，（）=>{
const onWillMount=jest.fn（）；
SomeComponent.prototype.componentWillMount=onWillMount；
mount（）；
expect（onWillMount）.toBeCalled（）；
});
我不知道其他答案是否有助于回答您的问题，但您不需要测试componentWillMount。React应该已经为您进行了该测试

与您的测试更相关的是测试您在该方法中为组件添加的功能或操作

如果您正在进行一些API调用，运行一个基于道具的函数，或者其他任何东西，这就是您应该测试的内容。模拟
组件将装入的
触发器的函数/操作/代码，并对其进行断言和期望

例如：

组成部分：

class YourComponent extends Component {

  componentWillMount() {
    /*this fetch function is actually what you want to test*/
    this.props.fetch('data')
  }

  render() {
    /* whatever your component renders*/ 
  }    
}

测试：

test('should call fetch when mounted', () => {
  let mockFetch = jest.fn()

  const wrapper = mount(<SomeComponent fetch={mockFetch}/>);

  expect(wrapper).toBeDefined();
  expect(mockFetch).toHaveBeenCalled();
  expect(mockFetch.mock.calls[0]).toEqual(['data'])
});

test（'should call fetch when mounted'，（）=>{
让mockFetch=jest.fn（）
const wrapper=mount（）；
expect（wrapper.toBeDefined（）；
expect（mockFetch）.toHaveBeenCalled（）；
expect（mockFetch.mock.calls[0]）.toEqual（['data']））
});
我认为上述答案无法解决这个问题。这是一个笑话，它允许你监视一个方法，但不允许你在监视它的调用状态时通过
callThrough
。最适合我的解决方案是使用定义了
componentWillMount
的组件设置测试。开玩笑只会让事情变得更复杂


description（'componentWillMount'，（）=>{
常量调用=[]
类Component1扩展了组件{
组件willmount（）{
呼叫。推送（新日期）
}
render（）{…}
}
每次（（）=>calls.splice（0，calls.length））之后
它（'已被调用'，（）=>{
挂载（）
expect（calls.length）.toBe（1）
})
})
使用
包装器.instance（）.componentWillMount（）
从测试脚本调用
componentWillMount（）
方法。
您能否详细说明在componentWillMount内部调用的函数是否实际上是类本身的一部分，如：
this.fetch（'data'）
？
这个.prop.fetch（'data'）
只是一个例子。为此，我只调用一个函数，该函数通过props传递给
YourComponent
。因此，不，不是课程本身的一部分。您确实可以测试任何东西，但这里的基本要点是您不需要测试
组件willmount
或任何react生命周期方法。React/Facebook为你做这件事。只需测试您在这些生命周期方法中编写的代码是否有效。是的，我明白了。对不起，我说得不够清楚。如果生命周期函数是通过道具传递的函数，我理解如何测试生命周期函数中的所有内容。但是属于组件的函数呢？您将如何测试该函数是否被调用等等？如果
this.props.fetch（）
改为
this.fetch（）
，您将如何测试
组件内部的willmount
，函数
this.fetch（）
被多次调用？简单的方法是使用BDD，围绕该方法应该进行的更改进行断言。如果要更改UI的某些部分，可以使用Ezyme的
mount
函数，期望某个DOM元素/组件存在/不存在。否则，我将使用浅包装组件并使用
wrapper.instance（）。我真的希望其他人能在这里插话，因为这是我能想到的最好的方法。这是否意味着你在这些生命周期方法中所做的一切都需要函数调用？例如，如果我有一个car类，在
componentDidMount
上，我想启动汽车并换档，这两个动作都应该是函数调用（
startCar
和
shiftGear
），而不是在
componentDidMount
中写入逻辑？这是公平的理解吗？我发现，当您使用Redux时，这可以通过使用
MapStateTrops
和
mapDispatchToProps
和
connect
中间件来实现。