时间戳

首页 > 解决方案 > 无法在子组件 React redux jest 中激发更改事件

reactjs - 无法在子组件 React redux jest 中激发更改事件

问题描述

我是反应 redux 的新手，我正在尝试对 FormContainer 组件进行单元测试。但我无法使用酶或玩笑模拟 Form 组件上的更改事件。在 wrapper.instance() 我收到 null 但我不认为应该这样做。如果不是，那么测试 FormContainer.js 文件的正确方法是什么，因为当我运行测试覆盖率时，它告诉我更改功能未被发现。

FormContainer.js

import React, { Component } from "react";
import { connect } from "react-redux";
import Form from "../components/Form";
import { isNumeric } from "../utils";

class FormContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      number: "",
      error: false
    };
  }
  // componentWillReceiveProps(nextProps) {
  //   console.log(nextProps, this.props, "main component");
  // }

  change = event => {
    let value = event.target.value;
    if (isNumeric(value) && value < 1001 && value >= 0) {
      if (value === "0") {
        this.setState({
          ...this.state,
          error: true
        });
        return;
      } else {
        this.setState({
          ...this.state,
          [event.target.name]: value,
          error: false
        });
      }
    } else {
      this.setState({ ...this.state, error: true });
    }
  };

  render() {
    return (
      <Form change={this.change} value={this.state} error={this.state.error} />
    );
  }
}
const mapStateToProps = state => {
  return { ...state };
};

export default connect(mapStateToProps)(FormContainer);

FormContainer.test.js

import React from 'react';
import configureStore from "redux-mock-store";
import { shallow,mount } from 'enzyme';
import FormContainer from '../../containers/FormContainer';
import { findByAttr } from '../../utils';
import Form from '../../components/Form';

describe("Testing Form container", () => {
    let wrapper;
    let store;
    beforeEach(() => {
        const initialState = {}
        const mockStore = configureStore();
        store = mockStore(initialState);
        wrapper = shallow(<FormContainer store={store} />);
    });
    it("Should render without error ", () => {
        expect(wrapper.exists()).toBe(true);
    });

    it("Simulate change", () => {
        let component = wrapper.find(Form);
        const mockChange = jest.fn();
        wrapper.instance().change = mockChange;
    });
});

测试表单容器 › 模拟更改

TypeError: Cannot set property 'change' of null

  22 |         let component = wrapper.find(Form);
  23 |         const mockChange = jest.fn();
> 24 |         wrapper.instance().change = mockChange;
     |         ^
  25 |     });
  26 | });

  at Object.<anonymous> (src/__test__/containers/FormContainer.test.js:24:9)

标签： reactjsreduxjestjsenzyme

解决方案

不需要导入import Form from '../../components/Form';，因为我们只是测试FormContainer组件，所以删除它。并且没有调用事件侦听器change，请onChange改用。

<Form onChange={this.change} value={this.state} error={this.state.error} />

尝试更改此规范：

it("Simulate change", () => {
    let component = wrapper.find(Form);
    const mockChange = jest.fn();
    wrapper.instance().change = mockChange;
});

至：

it("Simulate change", () => {
    (wrapper.find(Form).first()).simulate('change');
    expect(wrapper.instance().change.mock.calls.length).toBe(1);
});

推荐阅读