我如何在一个另一个类的实例的笑话中模拟一个React组件属性?

时间:2018-07-19 22:56:26

标签: reactjs testing mocking jestjs

我想测试一个具有服务实例作为属性的react组件。该服务的方法由组件中的方法调用。我想模拟该服务,因此它的实现与我无关。以下是我的要求的摘录:

## dataset: [{'a':0, 'b':10}, {'a':1, 'b':11}, {'a':2, 'b':12}, ...]
dataset = tf.data.Dataset.range(10).map(lambda x: {'a': x, 'b': x + 10})
iterator = dataset.make_initializable_iterator()
next_elem = iterator.get_next()
with tf.Session() as sess:
    sess.run(iterator.initializer)
    print(sess.run(next_elem['a']))  # 0
    print(sess.run(next_elem['a']))  # 1
    print(sess.run(next_elem['b']))  # 12

但是现在我得到了服务的实现细节错误。如何模拟服务,以便可以简单地测试Component的方法?

1 个答案:

答案 0 :(得分:1)

如果您的项目是Webpack项目,那么https://github.com/plasticine/inject-loader非常有用。您只需几行代码就可以简单地将任何依赖项与模拟项交换。

describe('SomeComponent', () => {
  let SomeComponent;
  let SomeServiceSpy;

  beforeEach(() => {
    SomeServiceSpy= // {a mock/spy};
    SomeComponent= require('inject-loader!./SomeComponent')({
      '../services/SomeService': {SomeServiceSpy},
    });
  });

  it('should ...', () => {
    const wrapper = shallow(<SomeComponent/>)

    wrapper.find(Button).simulate('click')

    expect(SomeServiceSpy).toHaveBeenCalledTimes(1)
  });

});

注意:确保没有在文件顶部导入被测模块(SomeComponent)。 require调用完成了这一部分。