业力测试无法识别动态传递属性以反应组件

Question

我正在尝试测试传递给 React 组件的属性是否获得了正确的值，但它似乎不起作用，因为（我认为）属性得到了它值动态地取决于父组件状态。这是代码（总结）：

import React from 'react';
import InfiniteScroll from 'react-infinite-scroller';

class myClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ....
      inputChanged: 0
      ....
  };

  ...

  render() {
    let items = [];

  ... code that retrieve items ...


    return (
        <InfiniteScroll
          pageStart={this.state.inputChanged ? 1 : 0} // page start is changed according to this.state.inputChanged value
          loadMore={this.loadMore.bind(this)}
          hasMore={this.state.hasMoreItems}
          loader={<div className="loader" key={0}>Loading ...</div>}
          threshold={200}
        >
          <div className="container-fluid">
            <div className="row">
              {items}
            </div>
          </div>
        </InfiniteScroll>
    );
  }
}

在我的规范文件中：

import React from 'react';
import {mount} from 'enzyme';
import {expect} from 'chai';

describe('myClass', () => {
    let wrapper;

      beforeEach(() => {
        wrapper = mount(
          <myClass/>,
          {attachTo: document.createElement('div')}
        );
      });

    it('set correct pageStart', done => {
        const InfiniteScroll = wrapper.find('InfiniteScroll');
        wrapper.setState({
          inputChanged: 1
        });
        expect(InfiniteScroll.props().pageStart).to.equal(1);
        done();
      });
}

但无论如何，InfinteScroll.props().pageStart为0，测试失败。据我了解，它应该将 accountring 更改为 wrapper.state().inputChanged，但事实并非如此。有什么想法吗？

提前致谢！

Answer 1

在调用 setState 之前，您保留了 InfiniteScroll 的引用。您需要移动代码以在 setState 之后获取 InfiniteScroll 的引用。这是更新后的测试。

it('set correct pageStart', done => {
    wrapper.setState({
        inputChanged: 1
    });
    const InfiniteScroll = wrapper.find('InfiniteScroll');
    expect(InfiniteScroll.props().pageStart).to.equal(1);
    done();
});

业力测试无法识别动态传递属性以反应组件

Passing property dynamically to react component doesn't recognized by karma test

chai

karma-runner

reactjs

enzyme

业力测试无法识别动态传递 属性 以反应组件

Passing property dynamically to react component doesn't recognized by karma test

chai

karma-runner

reactjs

enzyme

业力测试无法识别动态传递属性以反应组件