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

IT技术 javascript reactjs enzyme jss
2021-05-03 21:46:24

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

在单元测试中，我想断言该组件包含<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。所以我的自然（也许不是正确的？）react是用以下内容包装组件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 进行单元测试有点陌生，所以如果有人能在这方面启发我，我将不胜感激；）

1个回答

对于仍在为此苦苦挣扎的任何人，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'
其它你可能感兴趣的问题
上一篇如何在 ES6+ 的 webpack 中的 node_modules 上使用 babel 加载器？ 下一篇使用 React-Hook-Form 和 YupResolver 时遇到此错误：尝试导入错误：'set' 未从 'react-hook-form' 导出（导入为 'o'）