Question

在Github上跟进此问题后，我有一个组件Comp，在导出时，injectSheet来自reactjss。 请参阅codesandbox 上的设置。

在单元测试中，我想断言该组件包含<a>，它会执行（参见codesandbox），但测试失败，无论如何：

describe("<Comp /> component", () => {
  const wrapper = shallow(<Comp />);

  it("should render a <a>", () => {
    expect(wrapper.find('a')).to.have.length(1);
  });
});

我得到Error: [undefined] Please use ThemeProvider to be able to use WithTheme。所以我的自然（也许不是正确的？）反应是用ThemeProvider包裹组件：

const wrapper = shallow(
  <ThemeProvider theme={{}}>
    <Comp />
  </ThemeProvider>
)

然后我得到AssertionError: expected { length: 0 } to have a length of 1 but got 0。

我尝试了一系列方法，包括拨打dive，find或first进行额外的shallow通话，但我会始终最终得到Please use ThemeProvider to be able to use WithTheme：

// 1. dive(), as suggested in
// https://github.com/cssinjs/react-jss/issues/30#issuecomment-268373765
expect(wrapper.dive('Comp')).to.have.length(1);
expect(wrapper.dive('Comp').find('a')).to.have.length(1);
expect(wrapper.dive().find('a')).to.have.length(1);

// 2. find() / first(), as suggested in https://github.com/airbnb/enzyme/issues/539
expect(wrapper.find(Comp).shallow().find('a')).to.have.length(1);
expect(wrapper.first().shallow().find('a')).to.have.length(1);

这里有什么想法吗？我对React进行单元测试有点新，所以如果有人可以启发我，我会很感激;）

Answer 1

对于仍在努力解决这个问题的人，GitHub建议使用一种可行方法。您可以导出独立组件并单独测试，而不是测试用injectSheet HOC包装的样式化组件

// Component.js
import React from 'react'
import injectSheet from 'react-jss'

const styles = {
  color: 'burlywood'
}

// named export for unit tests
export const Component = props => <h1>Component</h1>

// default export to be used in other components
export default injectSheet(styles)(Component)

这适用于大多数用例，因为通常需要对普通组件及其逻辑进行单元测试，而不是任何相关的样式。所以在你的单元测试中只需做

import { Component } from './Component'

而不是（您将在其余的代码库中执行此操作）

import Component from './Component'

如何遍历嵌套在ThemeProvider HOC中的浅组件？

1 个答案: