Question

好的，我已经上传了一个更直接的例子。当它们位于辅助函数内部时，我无法调用模拟函数。不确定我做错了什么。

class TodoSearch extends Component {
    handleSearch = () => {
        const searchInput = this.searchInput.value;
        // passed down from parent component
        this.props.onSearch(searchInput);
    };

    handleCheckbox = e => {
        const showCompleted = e.target.checked;
        // passed down from parent component
        this.props.onCheckbox(showCompleted);
    };

    render() {
        return (
            <form>
                <FormGroup>
                    <FormControl
                        type="search"
                        className="todoSearchInput"
                        placeholder="Search"
                        inputRef={input => (this.searchInput = input)}
                        onChange={this.handleSearch}
                    />
                    <Checkbox checked={this.props.checked} onChange={this.handleCheckbox}>
                        Show completed todos
                    </Checkbox>
                </FormGroup>
            </form>
        );
    }
}

export default TodoSearch;

因此，我正在使用Jest和Enzyme，这是一个很浅的＆＃39;。这是我迄今为止成功完成的事情

import React from 'react';
import { shallow } from 'enzyme';
import renderer from 'react-test-renderer';

import TodoSearch from './TodoSearch';

describe(TodoSearch, () => {
    const searchText = 'Buy Milk';
    const mockOnSearch = jest.fn();
    const component = shallow(<TodoSearch onSearch={mockOnSearch} />);

    it('should exist', () => {
        const component = renderer.create(<TodoSearch />);
        const tree = component.toJSON();
        expect(tree).toMatchSnapshot();
    });

    it('contains the form', () => {
        expect(component.find('form')).toHaveLength(1);
        expect(component.find('Checkbox')).toHaveLength(1);
        expect(component.find('.todoSearchInput')).toHaveLength(1);
    });
});

如何测试onSearch内的handleSearch是否已运行？尝试了很多方法，但只是没有得到它。非常感谢任何帮助。

Answer 1

这是解决方案，我简化了您的组件，删除了不相关的部分。

依赖性：

"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"jest": "^24.8.0",
"react": "^16.9.0",

TodoSearch.tsx：

import React, { Component } from 'react';
import console = require('console');

interface ITodoSearchProps {
  onSearch(input): any;
  onCheckbox(value): any;
}

class TodoSearch extends Component<ITodoSearchProps> {
  private searchInput: HTMLInputElement | null = null;
  constructor(props: ITodoSearchProps) {
    super(props);
  }
  public handleSearch = () => {
    if (this.searchInput) {
      const searchInput = this.searchInput.value;
      console.log('searchInput: ', searchInput);
      // passed down from parent component
      this.props.onSearch(searchInput);
    }
  }

  public handleCheckbox = e => {
    const showCompleted = e.target.checked;
    // passed down from parent component
    this.props.onCheckbox(showCompleted);
  }

  public render() {
    return (
      <form>
        <input
          type="search"
          className="todoSearchInput"
          placeholder="Search"
          onChange={this.handleSearch}
          ref={input => (this.searchInput = input)}
        />
      </form>
    );
  }
}

export default TodoSearch;

TodoSearch.spec.tsx：

import React from 'react';
import TodoSearch from './TodoSearch';
import { mount } from 'enzyme';

describe('TodoSearch', () => {
  const mockOnSearch = jest.fn();
  const mockOnCheckbox = jest.fn();
  it('should handle search correctly', () => {
    const searchInput = 'jest';
    const wrapper = mount(<TodoSearch onSearch={mockOnSearch} onCheckbox={mockOnCheckbox}></TodoSearch>);
    (wrapper.find('input').instance() as any).value = searchInput;

    wrapper.find('input').simulate('change');
    expect(mockOnSearch).toBeCalledWith(searchInput);
  });
});

带有覆盖率报告的单元测试结果：

 PASS  src/stackoverflow/47493126/TodoSearch.spec.tsx
  TodoSearch
    ✓ should handle search correctly (50ms)

searchInput:  jest
----------------|----------|----------|----------|----------|-------------------|
File            |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------------|----------|----------|----------|----------|-------------------|
All files       |       90 |       75 |    83.33 |    88.89 |                   |
 TodoSearch.tsx |       90 |       75 |    83.33 |    88.89 |             24,26 |
----------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.846s, estimated 6s

源代码：https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/47493126

在期望调用Mock函数时，React Jest Test失败

1 个答案: