如何使用玩笑和酶来监视 componentWillMount

Question

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

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

但是即使调用了componentWillMount方法，测试也没有通过。我在这里错过了什么？

Answer 1

我会首先 spy 组件的 componentWillMount 方法，但也会使用 .and.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);
});

Answer 2

试试这个：

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

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

Answer 3

我不知道其他答案是否对您的问题有帮助，但您应该不需要测试 componentWillMount。 React 应该已经为你做了那个测试。

与您的测试更相关的是测试您在组件的该方法中放置的功能或操作。

如果您要进行一些 API 调用、运行基于 props 的函数或其他任何东西，那么您应该测试这些。模拟 componentWillMount 触发的 function/action/code，并对此做出断言和期望。

示例：

组件：

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'])
});

Answer 4

我认为以上答案没有解决问题。这是个玩笑，它允许您监视一个方法，但不允许您在监视其调用状态时 callThrough。最适合我的解决方案是使用定义了 componentWillMount 的组件设置测试。开玩笑只会让事情变得更复杂。

describe('componentWillMount', () => {
  const calls = []
  class Component1 extends Components {
    componentWillMount() {
      calls.push(new Date)
    }
    render() { ... }
  }
  
  afterEach(() => calls.splice(0, calls.length))
  it('has been called', () => {
    mount(<Component1 />)
    expect(calls.length).toBe(1)
  })
})

Answer 5

使用 wrapper.instance().componentWillMount(); 从测试脚本调用 componentWillMount() 方法..

如何使用玩笑和酶来监视 componentWillMount

How to spy componentWillMount using jest and enzyme

unit-testing

reactjs

jestjs

enzyme