javascript - 如何使用 enzyme 和 jest 测试 onChange 输入事件

标签 javascript reactjs jestjs enzyme

我正在尝试使用 enzymejest 测试我的组件的 onChange 事件。 TextFieldWrapper.jsx:

import React from "react";
import PropTypes from "prop-types";
import TextField from "@material-ui/core/TextField";

const TextFieldWrapper = ({
  label,
  type,
  input,
  meta: { touched, error },
  multiline,
  fullWidth,
  required
}) => {
  return (
    <div>
      <TextField
        required={required}
        label={label}
        error={!!(touched && error)}
        margin="normal"
        multiline={multiline}
        rows={4}
        type={type}
        value={input.value}
        onChange={input.onChange}
        variant="outlined"
        onBlur={input.onBlur}
        fullWidth={fullWidth}
        helperText={touched && error ? error : ""}
      />
    </div>
  );
};

TextFieldWrapper.defaultProps = {
  multiline: false,
  fullWidth: false,
  required: false
};
TextFieldWrapper.propTypes = {
  label: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
  input: PropTypes.shape({}).isRequired,
  meta: PropTypes.shape({
    touched: PropTypes.bool,
    error: PropTypes.string
  }).isRequired,
  multiline: PropTypes.bool,
  fullWidth: PropTypes.bool,
  required: PropTypes.bool
};

export default TextFieldWrapper;

TextField.spec.js:

import React from 'react';
import { shallow, mount } from 'enzyme';
import TextFieldWrapper from '../../components/common/TextFieldWrapper';
describe('TextField component', () => {
it('Should change value when onChange was called', () => {
    const onChange = jest.fn();
    const props = {
        label: 'Test Label',
        type: 'text',
        input: {},
        value: 'Hello world',
        meta: {
            touched: true,
            error: 'error'
        },
        onChange,
    }
    const wrapper = mount(<TextFieldWrapper {...props}/>);
    wrapper.find('TextField').simulate('change', {
        target: {
            value: 'This is just for test'
        }
    })
    expect(onChange).toHaveBeenCalledWith('This is just for test');
})

})

我在运行测试时遇到了这个错误:

expect(jest.fn()).toHaveBeenCalledWith(expected)
Expected mock function to have been called with:
  ["This is just for test"]
But it was not called.

我发现了一个类似的问题:Enzyme simulate an onChange event 使用 sinon.js enzyme ,但是它不能解决我的问题。

最佳答案

我通过更新我的代码解决了这个问题:

import React from 'react';
import { shallow, mount } from 'enzyme';
import TextFieldWrapper from '../../components/common/TextFieldWrapper';
describe('TextField component', () => {
it('Should change value when onChange was called', () => {
    const onChange = jest.fn();
    const props = {
        label: 'Test Label',
        type: 'text',
        input: {
          onChange
        },
        value: 'Hello world',
        meta: {
            touched: true,
            error: 'error'
        }
    }
    const wrapper = mount(<TextFieldWrapper {...props}/>);
    const event = {
            target: {
                value: 'This is just for test'
            }
        }
    wrapper.find('TextField').simulate('change', event)
    expect(onChange).toHaveBeenCalledWith('This is just for test');
})

})

现在测试通过了。

关于javascript - 如何使用 enzyme 和 jest 测试 onChange 输入事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55833589/

相关文章:

javascript - 计算属性未更新

javascript - 通过选项 { useUnifiedTopology : true } to the MongoClient constructor

reactjs - 如何使用 Jest 获取测试文件上的 window.location.pathname?

unit-testing - 如何通过 JEST 检测模拟依赖库中的调用?

reactjs - 在 Jest 中测试 onChange 函数

javascript - 测试/导航其他网站的最佳语言

javascript - react : How to test component's input which uses ref?

javascript - 移除台阶线点

javascript - 世博相机第一次显示黑屏: React-Native

reactjs - 如何在 React js 中将 Base64 图像转换为 BLOB