Question

我有以下React组件

在这里探索输入代码

class IncrementalSearch extends React.Component {

    constructor(props) {
        super(props);
        this.onSearch$ = new Subject();
        this.onChange = this.onChange.bind(this);
    }

    componentDidMount() {
        console.log(this.simpleText);
        this.subscription = this.onSearch$
            .debounceTime(300)
            .subscribe(debounced => {
                this.props.onPerformIncrementalSearch(debounced);
            });
    }

    componentWillUnmount() {
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }

    onChange(e) {
        const newText = e.target.value;
        this.onSearch$.next(newText);
    }

    render() {
        return (
            <div className={styles.srchBoxContaner}>
                <input
                    className={styles.incSrchTextBox}
                    type="text" name="search" placeholder="Search.."
                    onChange={this.onChange}
                />
            </div>
        );
    }
}

我正在尝试使用Enzyme，Jest和Sinon进行测试。我的单元测试如下所示

it('calls componen`enter code here`tDidMount', () => {

        const componentDidMountSpy = sinon.spy(IncrementalSearch.prototype, 'componentDidMount');
        const wrapper = mount(<IncrementalSearch />);
        expect(IncrementalSearch.prototype.componentDidMount.calledOnce).toEqual(true);
        componentDidMountSpy.restore();
    });

当我运行代码时，我收到以下错误

TypeError：this.onSearch $ .debounceTime不是函数

在IncrementalSearch.componentDidMount   （SRC /组件/普通/ incrementalSearch / IncrementalSearch.jsx：37：13）         在Function.invoke（node_modules / sinon / lib / sinon / spy.js：194：51）

然而，如果我评论debounceTime并留下其他一切通过。我该如何解决这个问题？

Answer 1

我刚刚添加了以下导入功能

import 'rxjs/add/operator/debounceTime';

我仍然不知道为什么这在单元测试中不起作用并在我运行主应用程序时起作用，但是它有效。

使用Sinon时，使用debounceTime错误来反应组件

1 个答案: