1

我有一个反应组件。比方说 Todo

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

class Todo extends Component {

    // methods that incl. state manipulation

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

export default injectSheet(Todo);

我想用酶测试它。它有两个问题。

1. 访问状态 （和其他组件特定功能）

当我shallow或mount套件中的那个作曲家时，我当然无法访问它的状态，因为它不再是我的组件，而是围绕它的一些新东西。

例如，这段代码会给我一个错误：

it('should have state updated on handleAddTodo', () => {
    const todo = shallow(<Todo />);

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

它说当然TypeError: Cannot read property 'length' of undefined是因为状态不是我所期望的，但这是：{ theme: {}, dynamicSheet: undefined }

这也不会让我访问props等refs。

2. 主题提供者的问题

要为项目提供一些默认颜色，如下所示：

import React, { Component } from 'react';
import Colors from './whatever/Colors';

class App extends Component {
    render() {
        return (
            <ThemeProvider theme={Colors}>
                <WhateverInside />
            </ThemeProvider>
        );
    }
}

当然，在运行测试时它会给我一个错误[undefined] Please use ThemeProvider to be able to use WithTheme。

所以我的问题如下。有没有办法在“一个地方”解决这个问题。我怎样才能让酶不知道我的组件是用什么包裹的？

如果没有，那么如果将 ThemeProvider 功能传递给我正在测试的组件，我该如何解决这个问题？以及如何访问被包装组件的 state、ref、props 和其他东西？

谢谢！

4

2 回答 2

0

这是我要测试组件的方法，

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;
})

请在nordnet-ui-kit库中阅读更多关于它的信息，特别是在 test 目录中。这是一个简单的例子

于 2019-01-28T20:02:41.140 回答
-2

  1. 它与 JSS 无关。任何 HOC 都会包装您的组件。理想情况下，您不直接测试组件的任何内部。

    • Components public api 是 props，使用它们来渲染具有特定状态的组件，并使用浅渲染器验证渲染输出。

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

const StyledComponent = injectSheet(styles)(InnerComponent)
console.log(StyledComponent.InnerComponent)

  1. 如果您的组件依赖于主题，您必须始终提供主题提供程序。
于 2017-07-23T11:31:31.233 回答