如何通过开玩笑和酶测试框架访问内部的反应组件和模拟api调用？

Question

I am making a javascript unit test suite for a react-redux component with jest & enzyme; the component in question is a file upload form with a few fields that has some basic styling changes based on user input and/or server response. Jest & enzyme are both set up and working and I am able to successfully write basic tests okay.

I want to simulate user interaction with these UI elements (a file input and text fields) using jest & enzyme but I am having difficulty in doing so; I am fairly new to using these testing frameworks and have a basic understanding of react-redux and I am a bit overwhelmed with making sure the proper pieces are in place in order to write meaningful unit tests.

A general aside: this unit test is being made after the fact, some months ago I joined this project that is using test driven development techniques and I have not developed that way before so I am using this as an example/template for future development.

As of now the unit tests create the component successfully (with enzyme's mount & shallow with a mockStore and initial state). I have tried to do two things:

1. create a __mocks__ api just for unit testing which a different module uses (a redux action reducer which uses a helper method that makes the api call) as per jest docs here
2. find/access form fields (file input & text area) to simulate user interaction

I have not been fully successful in both cases and have unit tests that cover aspects of these but not in a fully integrated manner.

here is the render method for the component I am trying to make unit tests for:

render() {
    const { dataset } = this.props;

    let serverResp;
    dataset ? serverResp = dataset.fileUploadResp : null;

    let catFeats = this.state.catFeatures;
    let errorMsg = this.state.errorResp;
    let ordFeatureSelection = "";
    let catFeatureSelection = "";
    let dataPrevTable = this.getDataTablePreview();
    // default to hidden until a file is selected, then display input areas
    let formInputClass = "file-upload-form-hide-inputs";

    // server message to display in popup (or other UI element)
    serverResp ? serverResp = ( <p style={{display: 'block'}}> {JSON.stringify(serverResp)} </p> ) :
                 null;
    // check if file with filename has been selected, if so then use css to show form
    this.state.selectedFile && this.state.selectedFile.name ?
      formInputClass = "file-upload-form-show-inputs" : null;

    return (
      <div>
        <Form inverted>
          <Segment className="file-upload-segment">
            <Input
              className="file-upload-form-text-input"
              type="file"
              label="Select new dataset"
              id="upload_dataset_file_browser_button"
              onChange={this.handleSelectedFile}
            />
            <br/>
            <div
              id="file-upload-form-input-area"
              className={formInputClass}
            >
              <Form.Input
                label="Dependent Column"
                placeholder="class"
                value={this.state.dependentCol ? this.state.dependentCol : ""}
                type="text"
                onChange={this.handleDepColField}
              />
              <Form.Input
                label="Ordinal Features"
              >
                <textarea
                  label="Ordinal Features"
                  placeholder={"{\"ord_feat_1\": [\"MALE\", \"FEMALE\"], \"ord_feat_2\": [\"FIRST\", \"SECOND\", \"THIRD\"]}"}
                  onChange={this.handleOrdinalFeatures}
                />
              </Form.Input>
              <Form.Input
                label="Categorical Features"
              >
                <textarea
                  label="Categorical Features"
                  placeholder={"cat_feat_1, cat_feat_2"}
                  onChange={this.handleCatFeatures}
                />
              </Form.Input>
              <Popup
                header="Error Submitting Dataset"
                content={serverResp}
                open={errorMsg ? true : false}
                trigger={
                  <Button
                    inverted
                    color="blue"
                    compact
                    size="small"
                    icon="upload"
                    content="Upload dataset"
                    onClick={this.handleUpload}
                  />
                }
              />
            </div>
          </Segment>
        </Form>
        {dataPrevTable}
      </div>
    );
  }

It's a fairly basic react component connected to the app redux store with some semantic ui stuff for nice styling. There's a form with a file input, text area inputs and a button/popup; if no file is selected only the file input is displayed, if the attempt to submit a file is not successful the error message is displayed in the popup.

For point 1 - I attempted to follow the guide/docs from jest and create the mock api piece that a component uses and use jest.mock()

jest.mock('../../utils/apiHelper');
import uploadDataset from '../../data/datasets/dataset/api';

But in the unit test itself when I try

  it('testing promise for successfully case, proper dependent_col', () => {
    expect.assertions(1);
    return uploadDataset(fakeDataset).then(data => expect(data.name).toEqual('iris.csv'));
  })

the test fails with TypeError: (0 , _api2.default) is not a function I resorted to directly importing the mock api and calling it directly which works fine but fails to test the module which is supposed to be making the api call; I feel like it's almost a moot point to test this functionality in this way and would prefer to test the component in a way that properly emulates how it actually works, ie trigger the event which would cause the api call instead of just calling the api directly. How is jest.mock() supposed to be used? And am I using it incorrectly?

For point 2 - I am manipulating component react state directly and checking for UI updates as opposed to simulating user input through the form fields. I try to access the file input field using enzyme's find

let testFileUpload;

beforeEach(() => {
  testFileUpload = mount(<FileUpload store={store} testProp="hello" />);
})

... other tests ...

it('click file upload button', () => {
 testFileUpload.find('#upload_dataset_file_browser_button').simulate("change", 
 {
       target: {
         files: [ 'iris.csv' ]
       }
     });
 })
}

and the test fails with an error Method “simulate” is meant to be run on 1 node. 2 found instead. Method “simulate” is meant to be run on 1 node. 2 found instead. How am I supposed to access a file input/html element by ID and/or what does enzyme expect with simulate? I have spent the last few days looking at jest/enzyme documentation and examples and need some help. Why does the find method return 2 nodes when there is only one element with that id? And how am I supposed to simulate a change event for a file selection on said node? Similar to the above mentioned workaround, I am changing the component's state directly and checking things from that point on but I would prefer to simulate actual use cases as close as possible.

Any help is greatly appreciated.

With all that said, is it okay to circumvent certain things in unit tests to essentially accomplish the same results? With my problem, I am having some trouble simulating input into a form field which is supposed to use react setState on user input/change so I am just changing the state directly in lieu of getting the input through the UI element. In the opinion of people familiar with unit testing, is this manner of unit test sufficient or is this grossly incorrect? Right now I am pretty much the only person making unit tests for the front end UI components on this project and I am not too sure how to correctly test these pieces.

Answer 1

Not sure why an element with an #id is mounted twice. But you can use index:

testFileUpload.find('#upload_dataset_file_browser_button').at(0).simulate("change")

I used to think enzyme works same as jquery works with css selectors. But seems it's not. Even the creators of the library do not recommend using mount with simulating actions. But I use anyway because that's the best way I can have good coverage on my tests. With enzyme I mostly use element selector rather than css selectors.

I use prop to simulate actions, because simulate cannot really "simulate" custom actions. Try this:

testFileUpload.find(Input).prop('onChange')('paramatertosendtofunction')

EDIT: you might use a helper function

function flushPromises() {
  return new Promise(resolve => setImmediate(resolve));
}


test('', () => {
  testFileUpload.find(Input).prop('onChange')('paramatertosendtofunction')
  testFileUpload.update()
  return flushPromises().then(() => {
    expect(textFileUpload.state.foo).toBe('bar')
  });
})