3

跟进Github上的问题，我有一个组件Comp在导出时用injectSheetfrom包装reactjss。请参阅代码沙箱上的设置。

在单元测试中，我想断言该组件包含<a>，它确实如此（参见代码和框），但无论如何测试都会失败：

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，但我总是会得到：findfirstshallowPlease 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 进行单元测试有点陌生，所以如果有人能在这方面启发我，我将不胜感激；）

4

1 回答 1

0

对于仍在为此苦苦挣扎的任何人，在GitHub 上建议了一种可行的方法。无需测试用 HOC 包装的样式化组件，而是导出独立组件并单独测试它injectSheet

// 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'
于 2018-06-02T22:51:10.473 回答