Question

我想模拟react类的方法，以便单元测试可以遵循模拟功能运行。

反应：16.8.6 开玩笑：24.8.0

Overview.js

import React from 'react';
export default class Overview extends Component{
  test1(){
    return {
      // fetch api
    } 
  }

  test2(){
    const result = this.test1();
    // do other thing
    return result 
  }
}

overview.test.js

import Overview from './index';
import { mount } from 'enzyme';
import React from 'react';
describe('test Overview',()=>{
  const mockResult = {test1:'test1'};
  console.info(Overview.prototype)  // {}
  Overview.prototype.test1=jest.fn(()=>{
    return mockResult
  });
  it('func test2',()=>{
    const wrapper = mount(<Overview/>);
    const {test2} = wrapper.instance();
    expect(mockResult).toEqual(test2())
  })
})

期望：运行成功

实际结果：运行失败，因为Overview.prototype无法覆盖或模拟test1函数。

当我尝试打印'Overview.prototype'时，我得到{}。这让我感到困惑。

如何模拟test1函数，为什么不能覆盖Overview？

请帮助我。

Answer 1

尝试执行以下操作：

it('func test2',()=>{
    const wrapper = mount(<Overview/>);
    wrapper.instance().test1 = jest.fn(() => mockResult);
    expect(wrapper.instance().test2()).toEqual(mockResult);
  })

Answer 2

除了模拟内部方法和检查内部方法外，还有很多理由选择其他方法：

这很困难，甚至是不可能的（一次方法处于模拟更改状态下，甚至通过闭包访问变量）
您会坚持执行细节，因此即使最小的重构（在state中重命名内部方法或属性名称）也可以使您更新大量的测试
这使您对组件更加自信（例如test1()停止调用fetch()会怎样？但是通过模拟测试甚至不知道该组件已损坏）

这是另一种方法：仅模拟外部API并仅通过公共接口进行通信（对于React组件，其props和render()结果可以使用诸如.find()，{{ 1}}，.filter()等

有几个像fetch-mock一样模拟全局.text()的软件包，但实际上您可以自己对其进行模拟（不要忘记使用fetch()而不是普通数据来模拟它）：< / p>

Promise

如何使用笑话来模拟React类的方法

2 个答案: