Reactjs 测试将JSS注入酶的成分进行反应

我有一个反应成分。让我们说Todo

从“React”导入React，{Component}； 从“react jss”导入表单； 类Todo扩展组件{ //包括状态操纵的方法 渲染{ const{classes}=this.props； 回来 ; } } 导出默认的todo； 我想用酶来测试一下。它有两个问题

一,。进入国家 以及其他特定于组件的功能

当我在组曲中浅放或装入该作曲家时，我当然无法访问其状态，因为它不再是我的组件，而是它周围的新组件

例如，此代码将给我一个错误：

它“应该在handleAddTodo上更新状态”，=>{ const todo=浅层； const length=todo.state'todos'.length； }; 它当然会说TypeError:无法读取undefined的属性'length'，因为状态不是我期望的状态，而是：{theme:{}，dynamicSheet:undefined}

这也不会让我获得道具、裁判等

二,。主题提供程序的问题

要为项目提供一些默认颜色，请执行以下操作：

从“React”导入React，{Component}； 从“./whatever/Colors”导入颜色； 类应用程序扩展组件{ 渲染{ 回来 ; } } 当然，当运行测试时，它会给我一个错误[undefined]，请使用ThemeProvider以便能够与主题一起使用

因此，我的问题如下。有没有办法在“一个地方”解决这个问题。我如何使酶不知道我的成分是用什么包装的

如果没有，那么如果将ThemeProvider功能传递给我正在测试的组件，我该如何解决问题？ 我如何访问包装组件的状态、引用、道具和其他内容

谢谢大家!

它与JSS没有特别的关系。任何一个HOC都会包装您的组件。理想情况下，您不直接测试组件的任何内部构件

组件公共api是道具，使用它们以特定状态渲染组件，并使用浅层渲染器验证渲染输出

对于某些边缘情况，如果第一种和首选方法不可能，您可以直接访问内部组件，并直接访问您需要的任何内容。你将不得不嘲笑HOC会为你传递的道具

常量StyledComponent=injectSheetstylesInnerComponent

---

console.logStyledComponent.InnerComponent下面是我测试组件的步骤

import React, { Component } from 'react';
import injectSheet from 'react-jss';

const styles = {};

class Todo extends Component {

    // methods that incl. state manipulation

    render() {
        const { classes } = this.props;
        return (
            <div className={classes.container}>
                <WhateverElse />
            </div>
        );
    }
}

export { styles, Todo as TodoCmp }

export default injectSheet(styles)(Todo);

在测试文件中，我将添加以下内容：

import { theme } from 'your-theme-source';

const mockReducer = (prev, curr) => Object.assign({}, prev, { [curr]: curr });

const coerceStyles = styles =>
  typeof styles === 'function' ? styles(theme) : styles;

const mockClasses = styles =>
  Object.keys(coerceStyles(styles)).reduce(mockReducer, {});

import {TodoCmp, styles} from 'your-js-file';
// then test as you'd normally.
it('should blah blah', () => {
    const classes = mockClasses(styles);
    const todo = shallow(<Todo classes={classes} />);

    const length = todo.state('todos').length;
})

请在测试目录中的库中阅读更多关于它的信息。这里有一个快速的

您是否能够解决请使用ThemeProvider以便最终能够使用主题？这是我的