Question

我想测试我的项目组件，但它包含函数isLoading（）作为prop。我在我的组件中调用此函数来在父（容器）中设置状态。当我尝试挂载它时，然后jest抛出错误TypeError：this.props.isLoading不是函数。

//Container.js
import React, { Component } from 'react';
import Item from './Item';
import React, { Component } from 'react';
import Item from './Item';

class Container extends Component {
  constructor() {
    super();
    this.state = {
      isLoading: false,
    };

  changeIsLoading(bool) {
    this.setState({
      isLoading: bool,
    });
  }

  render() {
    return (
      <div className="container">
        <Item
          className="item"
          isLoading={this.changeIsLoading}
          styles={this.props.styles}
        />

      </div>
    );
  }
}


// Item.test.js
import React from 'react';
import Container from '../containers/Container';
import { shallow, mount } from 'enzyme';
import changeIsLoading from '../containers/Container';

describe('Container', () => {
    const tree = mount(
      <Item
        isLoading={changeIsLoading(false)}
        styles={style}
      />
    );
    expect(tree).toMatchSnapshot();
  });
});

Answer 1

请注意您未在测试中传递函数。

  <Item
    isLoading={changeIsLoading(false)}
    styles={style}
  />

您正在传递调用changeIsLoading(false)的结果。

无论返回什么值，它都将是Item组件尝试调用的值this.props.isLoading()。

它会失败，因为this.props.isLoading不是函数，它是changeIsLoading(false)返回的内容。

您可能想要做的是将changeIsLoading作为isLoading道具传递给Item组件。

  <Item
    isLoading={changeIsLoading}
    styles={style}
  />

将函数作为prop传递的Jest组件

1 个答案: