Question

我正在为HOC编写单元测试，该HOC呈现图表并对其执行某些操作。该图表是使用从数据库获取的数据生成的，并存储在redux-store中。出于测试目的，我创建了一个假数据存储，但是图表的加载数据发生在componentDidMount，并通过检查prop的值来执行。所以我的代码如下：

...
ComponentDidMount()
{
    console.log(this.props.getData);

    if (this.props.getData === "YES")
        this.props.loadData();
}
...

我单元测试中的代码如下：

...
const mockStore = configureStore([thunk]);
let fakeStore = mockStore({...});

it("loads data"), function() {
    let store = fakeStore;
    const options = {
        context: {store},
        childContextTypes: {store: PropTypes.object.isRequired},
    };
    const mounted = mount(<Component getData="YES"/>, options);
    console.log(mounted.props());
    mounted.instance().componentDidMount();
}
...

问题是使用console.log我可以看到第一次安装组件并且componentDidMount自动运行时没有设置道具，尽管我指定了一些值，但道具紧接着，当我尝试调用函数时，它没有运行，但没有显示消息，解释为什么它没有。

有人可以提出建议吗？

Answer 1

您可以使用sinon library模拟外部互动。然后检查在呈现组件时是否调用模拟交互。你写的是单元测试而不是端到端测试。所以它应该是这样的。

import React from 'react'
import YourComponent from 'components/YourComponent'
import { shallow } from 'enzyme'
describe('(Component) YourComponent', () => {
  let _props, _spies, _wrapper

  beforeEach(() => {
    _spies = {}
    _props = {
      prop1: 'value1',
      prop2: 'value2',
      ...
      getData : (_spies.getData = sinon.spy()),
    }
    _wrapper = shallow(<YourComponent {..._props} />)
  })


  it('Should trigger the `getData` callback when mounted', () => {
    _spies.getData.should.have.been.called
  })

})

希望这会有所帮助。快乐的编码！

反应酶的道具没有安装在山上

1 个答案: