在Jest中测试onChange函数 [英] Testing onChange function in Jest

问题描述

我对Jest和测试来说还比较陌生。我有一个带有输入元素的组件：

I'm relatively new to Jest and testing in general. I have a component with an input element:

import * as React from "react";

export interface inputProps{
    placeholder: string;
    className: string;
    value: string;
    onSearch: (depID: string) => void;
}

onSearch(event: any){
    event.preventDefault();
    //the actual onclick event is in another Component
    this.props.onSearch(event.target.value.trim());
}

export class InputBox extends React.Component<inputProps, searchState> {
  render() {
        return (
            <input
                onChange={this.onSearch} //need to test this
                className={this.props.className} 
                type="text"
                value={this.props.value}
                placeholder={this.props.placeholder} />
        );
    }
}

我想要一个检查输入元素<$的测试c $ c> onChange 是一个将输入元素的 value 属性作为参数的函数。这是我到目前为止所走的距离：

I want a test that checks that input element's onChange is a function that takes in the input element's value attribute as the parameter. This is how far I have gotten so far:

//test to see the input element's onchange 
//returns a function that takes its value as a param
it("onChange param is the same value as the input value", () => {
    const mockFn = jest.fn();
    const input = enzyme.shallow(<InputBox 
                                    value="TestVal"
                                    placeholder="" 
                                    className="" 
                                    onSearch={mockFn}/>);


       input.find('input').simulate('change',  { preventDefault() {} });
       expect(mockFn.mock.calls).toBe("TestVal");
    });

我要离开这里的第一个解决方案在Jest中模拟按钮点击
并且： https://facebook.github.io/jest/docs/en/mock-functions.html

I am going off of the first solution here Simulate a button click in Jest And: https://facebook.github.io/jest/docs/en/mock-functions.html

编辑：运行上面的命令会引发以下错误：

Running the above throws the following error:

 TypeError: Cannot read property 'value' of undefined

推荐答案

您的代码段语法我认为应该是：

Syntax on your code snippet I think should be:

import React from 'react';

export default class InputBox extends React.Component {
  onSearch(event) {
    event.preventDefault();
    this.props.onSearch(event.target.value.trim());
  }
  render () { return (<input onChange={this.onSearch.bind(this)} />); }
}

测试失败，因为同样地，您定义<$ c $在事件对象上使用c> preventDefault 函数，还必须定义在 onSearch 函数上使用的其他属性。

The test is failing because, as same you define the preventDefault function on the event object, you also must define other properties used on the onSearch function.

it('should call onChange prop', () => {
  const onSearchMock = jest.fn();
  const event = {
    preventDefault() {},
    target: { value: 'the-value' }
  };
  const component = enzyme.shallow(<InputBox onSearch={onSearchMock} />);
  component.find('input').simulate('change', event);
  expect(onSearchMock).toBeCalledWith('the-value');
});

先前的测试代码需要定义事件形状，因为您使用的是浅层渲染。如果您想测试 onSearch 函数上是否使用了实际输入值，则需要尝试使用 enzyme.mount 进行完全渲染。 code>：

Previous test code needs to define the event shape because you are using shallow rendering. If you want instead to test that the actual input value is being used on your onSearch function you need to try a full render with enzyme.mount:

it('should call onChange prop with input value', () => {
  const onSearchMock = jest.fn();
  const component = enzyme.mount(<InputBox onSearch={onSearchMock} value="custom value" />);
  component.find('input').simulate('change');
  expect(onSearchMock).toBeCalledWith('custom value');
});

这篇关于在Jest中测试onChange函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！