reactjs - Enzyme Shallow 渲染实例不继承 props

Question

假设我有这样一个组件:

class ExampleComponent extends Component {
  exampleMethod = () => {
    this.props.examplePropFunction()
  }
}

然后我像这样构造我的测试:

it('exampleMethod', () => {
  const examplePropMock = jest.fn()
  const wrapper = shallow(<ExampleComponent examplePropFunction={examplePropMock}/>)
  wrapper.instance().exampleMethod()
  expect(examplePropMock).toHaveBeenCalled()
})

失败了

TypeError: _this.props.examplePropFunction is not a function

console.logging 它显示它实际上是未定义的。

一个简单的解决方案是运行:

wrapper.setProps({examplePropFunction: examplePropMock})

在进行实例之前。我的问题是，为什么最后一步是必要的？

Answer 1

没必要，你能不能在创建时检查 examplePropMock 实际上是一个 spy 函数而不是未定义的，你有安装最新的包吗？你一定是哪里做错了什么。我刚刚测试过:

例子.js

import { Component } from 'react';

class ExampleComponent extends Component {
  exampleMethod = () => {
    this.props.examplePropFunction()
  }
  render() {
    return null;
  }
}

export default ExampleComponent;

示例.spec.js

import React from 'react';
import expect from 'expect';
import { shallow } from 'enzyme';

import ExampleComponent from './example';

it('exampleMethod', () => {
  const examplePropMock = expect.createSpy();
  const wrapper = shallow(<ExampleComponent examplePropFunction={examplePropMock} />);

  wrapper.instance().exampleMethod();

  expect(examplePropMock).toHaveBeenCalled();
});

它在使用 setProps 或手动传递 props 时有效。

使用这些包进行测试:

"react": "^15.6.0",
"enzyme": "^2.5.1",
"expect": "^1.20.2",

我用了expect assertions创建 spy 而不是 Jest ，因为我不使用 Jest ，但应该没有区别。