Question

我有一个反应组件。让我们说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套件中的作曲家时，我无法访问其状态，因为它不再是我的组件，而是它周围的新东西。

E.g。这段代码会给我一个错误：

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功能传递给我正在测试的组件，如何解决问题呢？我如何访问包装组件的状态，参考，道具和其他东西？

谢谢！

Answer 1

这是我要测试的组件

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库中（特别是在测试目录中）详细了解它。这是一个快速的example

Answer 2

具体与JSS无关。任何HOC都会包装您的组件。理想情况下，您不直接测试组件的任何内部。
- 组件public api是props，使用它们呈现具有特定状态的组件，并使用浅渲染器验证渲染的输出。
- 对于某些边缘情况，如果首选且首选方式不可能，您可以直接访问内部组件并直接访问所需内容。你必须嘲笑HOC会为你传递的道具。

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

如果您的组件依赖于主题，则必须始终提供主题提供程序。

测试使用酶注入JSS注射样式的组分

2 个答案: