Testing- onClick - document.getElementById

Question

Trying to get the following click event to pass but not really sure how to call onclick on document.getElementById('file-input').value

Here is the 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();
});

It seems that I can't find #id . Any reason? here is 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>;

Answer 1

Here is the unit test solution:

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');
  });
});

Unit test result with 100% coverage:

 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

Source code: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/55011802