Question

我使用Jest和Enzyme来测试用TypeScript编写的React项目。我有一个包含在React-Router路由器中的组件，看起来有点像这样：

import { SomeButton } from './someButton';
import { RouteComponentProps, withRouter } from 'react-router';

const SomeButtonWithRouter = withRouter<{buttonCallback: () => void}>(SomeButton);

export class SomePage extends React.Component <RouteComponentProps<{}>, {}> {
  constructor(props: {}) {
    super(props);

    this.someCallback = this.someCallback.bind(this);
  }

  public render() {
    return (
      <div>
        <SomeButtonWithRouter buttonCallback={this.someCallback}/>
      </div>
    );
  }

  // This is the callback I want to  test:
  private someCallback() {
    console.log('This is a callback');
  }

现在我正在尝试编写一个调用someCallback然后进行一些断言的测试。我已将SomePage包裹在MemoryRouter中以便能够对其进行测试：

it('should do something', () => {
  const page = mount(<MemoryRouter><SomePage/></MemoryRouter>);
  const cb = page.find('SomeButton').prop('buttonCallback'); // <-- this is undefined
});

正如评论中所提到的，遗憾的是buttonCallback道具在这样访问时未定义。但是，当我输出page时，它确实说明了它：

<withRouter(SomeButton)
  onVerified={[Function bound ]}

以下几行：

<SomeButton
  history={ // ...
  // ...
  onVerified={[Function bound ]}

SomeButton和withRouter(SomeButton)都不能作为酶find的选择器。

我不确定为什么会这样;我我能够以这种方式为另一个未包含在withRouter中的子组件访问回调。我也不确定我所做的每件事是否都是正确的做法，所以欢迎任何有关更好的做事方式的指示。

Answer 1

Grr ...像往常一样，一夜的睡眠帮助我找出了问题 - 而且它实际上并不存在。如果它对任何人都有帮助，我会详细说明我犯的错误。

首先，最有用的事情要知道：const cb = page.find('SomeButton').prop('buttonCallback');和const cb = page.find('withRouter(SomeButton)').prop('buttonCallback');都应该有用 - 虽然我会选择前者，因为那时你不需要了解路由器的使用情况。

其次，我认为它不起作用的原因是因为我试图使用toJson(page.find('SomeButton').prop('buttonCallback'))（使用enzyme-to-json）输出结果，这将很乐意将该函数转换为{{1 }}

最后，这是最愚蠢的事情 - 我没有看到调用回调的效果，因为......我实际上没有调用它。我只是分配了它undefined，但必须用const buttonCallback = page.find...跟进。哦，还有：之后我的断言中有一个拼写错误。

我知道，愚蠢。当你在六个月内遇到这个问题时，请随意嘲笑我。

如何测试withRouter中包含的React组件的回调？

1 个答案: