CODEWITHSUNDEEP
reactjsjestjsenzymereact-hooksreact-state
user12352419
user12352419

Reputation: 1

React hooks not setting state while testing using jest

I have a react component 

const Upload = (props) => {
  const [fileName, setFileName] = useState("no file chosen")
  function handleFile(e) {
    const [sFile] = e.target.files;
    setFileName(sFile.name);
  }

  const chooseFile = (
      <label>
        <input id="file-upload" type="file" accept=".pdf, application/pdf" onChange={handleFile} />
        choose_file
      </label>
      <label className='file-text'>
        {fileName}
      </label>
  );

   return (
    <React.Fragment>
      {chooseFile}
    </React.Fragment>
  );
};

I have this test for checking the value change of state fileName, so that it displays the name of the file chosen

beforeEach(() => {
    wrapper = shallow(<Upload />);
  });

describe('Choose File', () => {
  const mockedFile = 'application.pdf';
  const event = {
    target: {
      files: [{ name: 'application.pdf' }]
    }
  };
  it('displays the file name when a file is selected', () => {
    wrapper.find('#file-upload').simulate('change', event);
    wrapper.update();
    expect(wrapper.find('label').at(1).text()).toEqual(mockedFile);
  });
}

But the output is always "no file chosen". Any help would be appreciated.

Upvotes: 0

Views: 601

Answers (1)

Lin Du
Lin Du

Reputation: 102267

Your code works fine for me.

index.tsx:

import React, { useState } from 'react';

export const Upload = props => {
  const [fileName, setFileName] = useState('no file chosen');
  function handleFile(e) {
    const [sFile] = e.target.files;
    setFileName(sFile.name);
  }

  return (
    <React.Fragment>
      <label>
        <input id="file-upload" type="file" accept=".pdf, application/pdf" onChange={handleFile} />
        choose_file
      </label>
      <label className="file-text">{fileName}</label>
    </React.Fragment>
  );
};

index.spec.tsx:

import React from 'react';
import { shallow } from 'enzyme';
import { Upload } from './';

let wrapper;
beforeEach(() => {
  wrapper = shallow(<Upload />);
});

describe('Choose File', () => {
  const mockedFile = 'application.pdf';
  const event = {
    target: {
      files: [{ name: 'application.pdf' }]
    }
  };
  it('displays the file name when a file is selected', () => {
    wrapper.find('#file-upload').simulate('change', event);
    wrapper.update();
    expect(
      wrapper
        .find('label')
        .at(1)
        .text()
    ).toEqual(mockedFile);
  });
});

Unit test result with 100% coverage:

PASS  src/stackoverflow/58793061/index.spec.tsx
  Choose File
    ✓ displays the file name when a file is selected (12ms)

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

dependencies versions:

"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"jest": "^24.9.0",
"jest-environment-enzyme": "^7.1.1",
"jest-enzyme": "^7.1.1",
"react": "^16.11.0",

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

Upvotes: 1

Related Questions