Question

我需要用Jest测试一个React组件（Toto）。借助redux撰写功能，该组件以两个HOC导出。

当我尝试在测试文件（Toto.test.tsx）中使用Toto组件时，出现TS2604错误（JSX元素类型“ Toto”没有任何构造或调用签名）。

Toto.test.tsx

import { shallow } from 'enzyme';
import * as React from 'react';
import Toto from '../../Toto';

function setupFullRenderingComponent(options: any = {}) {
  const props = {
    toto: 'hello'
  }

  const wrapper = shallow(   
    <Toto {...props} />
  );

  return {
    props,
    wrapper
  };
}

describe('Toto', () => {
  const { wrapper } = setupFullRenderingComponent();
  console.log(wrapper);
});

Toto.tsx

import * as React from 'react';
import { withRouter } from 'react-router';
import { compose } from 'redux';
import WithHelp from '../../../WithHelp';

class Toto extends React.Component<
  any,
  any
> {
  public constructor(props: any) {
    super(props);

    this.state = {
      total: 0
    };
  }

  // SOME STUFF

  public render() {
    return (
      <div>{this.state.total}</div>
    );
  }
}

export default compose(
  withRouter,
  WithHelp
)(Toto);

我该如何解决？

谢谢

Answer 1

您可以先写export class Toto extends ...，然后再在测试文件中写import {Toto} from ...。

Answer 2

添加“ as React.ComponentType”解决了我的问题。谢谢您的帮助

无法测试由redux compose包装的React组件

2 个答案: