如何遍历嵌套在ThemeProvider HOC中的浅层组件？ [英] How to traverse a shallow component nested in ThemeProvider HOC?

问题描述

在 Github 上跟踪该问题，我有一个组件 Comp 导出时，用来自 reactjss 的 injectSheet 包装。 请在代码沙箱 上查看设置。

Following up the issue on Github, I have a component Comp that when exported, is wrapped with injectSheet from reactjss. Please see the setup on codesandbox.

在单元测试中，我想断言该组件包含它执行的< a> （请参阅codeandbox），但是测试失败：

In a unit test, I'd like to assert that that component contains <a>, which it does (see codesandbox), but the test fails regardless:

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

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

我得到错误：[undefined]请使用ThemeProvider才能使用WithTheme 。因此，我的自然反应（也许是不正确的？）是使用 ThemeProvider 包装该组件：

I get Error: [undefined] Please use ThemeProvider to be able to use WithTheme. So my natural (perhaps not the correct?) reaction was to wrap the component with ThemeProvider:

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

然后我得到 AssertionError：预期{length：0}的长度1，但得到0 。

我尝试了很多方法，包括调用 dive ，查找或第一个，并额外调用浅 ，但我会始终以结尾，请使用ThemeProvider才能使用WithTheme ：

I tried a whole slew of approaches, including calling dive, find or first with an extra shallow call, but I would always end up with 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进行单元测试有点陌生，因此，如果有人可以启发我，我将不胜感激;）

Any ideas here? I am a bit new to unit testing with React, so I would appreciate if someone could enlighten me on this ;)

推荐答案

对于任何仍在为此挣扎的人，在一种可行的方法noreferrer> GitHub 。无需测试包装有 injectSheet HOC的样式化组件，而是导出独立组件并对其进行隔离测试

For anyone still struggling with this, one viable approach was suggested on GitHub. Instead of testing the styled component wrapped with injectSheet HOC, you export your stand-alone component and test it in isolation

// 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)

可以在大多数用例中使用，因为通常情况下，您需要对简单组件及其逻辑进行单元测试，而不是对其任何相关样式进行单元测试。因此，在您的单元测试中，只需

which would work for most use cases, since more often than not, you need to unit test the plain component and its logic, and not any of its associated styling. So in your unit test just do

import { Component } from './Component'

而不是（您将在其余代码库中这样做）

instead of (which you would do in the rest of your codebase)

import Component from './Component'

这篇关于如何遍历嵌套在ThemeProvider HOC中的浅层组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！