问测试- onClick - document.getElementById
EN

Stack Overflow用户

提问于 2019-03-05 21:22:57

回答 1查看 371关注 0票数 0

正在尝试传递以下单击事件，但不确定如何在document.getElementById('file-input').value上调用onclick

下面是testfile.js：

beforeEach(() => {
  wrapper = shallow(<Component {...baseProps} />
});

it('should call click event on File Input', () => {
  baseProps.onClick.mockClear();
  wrapper.setProps({});
  wrapper.setState({});
  wrapper.update();

  wrapper.find('#fileinput-testclick').simulate('click');
  expect(toJson(wrapper)).toMatchSnapshot();
});

我好像找不到#id了。有什么原因吗？这是file.js

<label
  for="file-input"
  id="fileinput-testclick"
  onClick={() => {
    document.getElementById('file-input').value = '';
    document.getElementById('file-input').click();
  }}
  className="tran-button file-button">
  {this.state.fileName ? 'Change File' : 'Choose File'}
</label>;

enzyme

javascript

unit-testing

jestjs

企业复产复工专享

为企业提供海量产品优惠，助力中小企业数字化转型升级

回答 1

Stack Overflow用户

发布于 2019-11-12 13:21:41

以下是单元测试解决方案：

index.jsx

import React, { Component } from 'react';

class SomeComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileName: ''
    };
  }
  render() {
    return (
      <div>
        <input id="file-input" type="file"></input>
        <label
          htmlFor="file-input"
          id="fileinput-testclick"
          onClick={() => {
            document.getElementById('file-input').value = '';
            document.getElementById('file-input').click();
          }}
          className="tran-button file-button">
          {this.state.fileName ? 'Change File' : 'Choose File'}
        </label>
      </div>
    );
  }
}

export default SomeComponent;

index.spec.jsx

import React from 'react';
import SomeComponent from '.';
import { mount } from 'enzyme';

describe('SomeComponent', () => {
  test('should call click event on File Input', () => {
    document.getElementById = jest.fn();
    const wrapper = mount(<SomeComponent></SomeComponent>);
    expect(wrapper.find('label').text()).toBe('Choose File');
    const input = wrapper.find('#file-input').getDOMNode();
    const inputClickSpy = jest.spyOn(input, 'click');
    document.getElementById.mockReturnValue(input);
    wrapper.find('#fileinput-testclick').simulate('click');
    expect(document.getElementById.mock.calls[0]).toEqual(['file-input']);
    expect(document.getElementById.mock.calls[1]).toEqual(['file-input']);
    expect(inputClickSpy).toBeCalledTimes(1);
    expect(input.value).toBe('');

    wrapper.setState({ fileName: 'UT.pdf' });
    expect(wrapper.find('label').text()).toBe('Change File');
  });
});

100%覆盖率的单元测试结果：

 PASS  src/stackoverflow/55011802/index.spec.jsx (9.277s)
  SomeComponent
    ✓ should call click event on File Input (59ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |      100 |      100 |      100 |      100 |                   |
 index.jsx |      100 |      100 |      100 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        10.694s