Question

我有一个正在测试的组件，其中有一些子组件。有问题的子组件使用compose渲染。我正在使用浅层渲染，并且基本上想测试子组件的存在。测试不断返回空节点。我发现，如果删除组成部分并使用默认导出默认值，则测试通过。但是，这不是我的组件的工作方式。我该如何测试这种成分的存在？

这是我正在测试的主要组件

export class Home extends React.Component {
  render() {
    return (
      <div id="landing">
          <Navigation />
          <LoginInline />
          </div>
        </div>
      </div>
    );
  }
}

这是子组件

export class LoginInline extends Component {
   ...
};

export default compose(
  inject('userStore'),
  observer,
  withRouter,
)(LoginInline);

在测试中，我正在检查LoginInline组件是否存在

let wrapper = shallow(<Home />);
let inlineLogin;
describe('<Home /> component test', () => {

  test('should find the LoginInline component', () => {
    // const comp = wrapper.find('LoginInline');
    inlineLogin = wrapper.find('LoginInline')
    expect(inlineLogin.length).toBe(1)
    const instance = wrapper.instance();
    expect(instance).toBeInstanceOf(Home)
  });
});

在测试中，我正在检查LoginInline组件的长度，并希望它的长度为1。但是它返回0个节点。但是，如果我删除了组成部分

export default compose(
  inject('userStore'),
  observer,
  withRouter,
)(LoginInline);

然后简单地做 export default class LoginInline extends Component 测试按预期通过。但这不是组件的工作方式。我需要在测试中做些什么才能看到LoginInline组件？拜托，我需要建议。

如何测试用recompose（compose）渲染的子组件的反应？

0 个答案: