Jest 및 vue/test-utils를 사용하여 입력 파일을 테스트하는 방법

Jest 및 vue/test-utils를 사용하여 입력 파일을 테스트하는 방법

Jest와 vue/test-utils를 사용하여 파일업로더 컴포넌트를 테스트하고 싶습니다.

이거 있어요.

 describe('show progress bar of uploading file', () => {
    const wrapper = mount(FileUploaderComponent)

    // create csv file
    let csv = new Blob([''], { type: 'text/csv;charset=utf-8;' })
    csv.name = 'myFile.csv'

    let input = wrapper.find('input')
    input.element.value = csv // || csv.error value, Error here
    input.trigger('change')

    // Update current status
  })

FileUploaderComponent의 위치:

<template>
  <form action="POST" enctype="multipart/form-data">
    <label class="btn btn-primary" for="input-file">
      <input class="input-file" id="input-file" name="file" type="file" accept=".xlsx, .xls, .csv">
      UPLOAD FILE
    </label>
  </form>
</template>

다음 오류를 발생시킵니다.

Invalid State Error:이 입력 요소는 빈 문자열로만 프로그래밍 방식으로 설정할 수 있는 파일 이름을 받아들입니다.

  49 |
  50 |     let input = wrapper.find('input')
> 51 |     input.element.value = csv
  52 |     input.trigger('change')
  53 |
  54 |     // Update current status

자, 질문은 다음과 같습니다.파일 입력 값으로 이벤트 변경을 트리거하려면 어떻게 해야 합니까?이 경우 CSV 파일을 값으로 사용할 수 있습니까?

이 조작은, 다음의 방법으로 실시할 수 있습니다.DataTransfer물건.안타깝게도 JSDOM에 추가되지 않았기 때문에 Jest에서 테스트할 수 없습니다.오브젝트 추가에 관한 미해결 문제가 있습니다.https://github.com/jsdom/jsdom/issues/1568

Karma를 사용하여 브라우저에서 테스트를 실행한 경우 다음과 같이 테스트할 수 있습니다.

const wrapper = shallow(FormComponent)
const input = wrapper.find('input[type="file"]')
const dT = new ClipboardEvent('').clipboardData || new DataTransfer()
dT.items.add(new File(['foo'], 'programmatically_created.txt'))
input.element.files = dT.files
input.trigger('change')

가치의 시뮬레이션을 원하는 경우input.element.files및 변경 사항input.element.valueJest에서는 모든 DOM 동작을 정확하게 시뮬레이트할 필요는 없지만 이러한 필드의 getter/setter를 정의함으로써 실행할 수 있습니다.이것으로 충분합니다.

let localImageInput
let localImageInputFiles
let localImageInputValueGet
let localImageInputValueSet
let localImageInputValue = ''

beforeEach(function() {
  localImageInput = wrapper.find('#local-image-input')
  localImageInputFilesGet = jest.fn()
  localImageInputValueGet = jest.fn().mockReturnValue(localImageInputValue)
  localImageInputValueSet = jest.fn().mockImplementation(v => {
    localImageInputValue = v
  })

  Object.defineProperty(localImageInput.element, 'files', {
    get: localImageInputFilesGet
  })

  Object.defineProperty(localImageInput.element, 'value', {
    get: localImageInputValueGet,
    set: localImageInputValueSet
  })
})

it('should do the thing', function() {
  localImageInputValue = 'some-image.gif'
  localImageInputFilesGet.mockReturnValue([{
    size: 12345,
    blob: 'some-blob',
    width: 300,
    height: 200
  }])

  localImageInput.trigger('change')

  return Vue.nextTick().then(() => {
    // Assuming the component sets input.value = '' when this event is triggered
    // and calls someFn with the image data
    expect(localImageInputValue).toEqual('')
    expect(someFn.mock.calls[0][0]).toEqual({
      size: 12345,
      blob: 'some-blob',
      width: 300,
      height: 200
    })
  })
}

언급URL : https://stackoverflow.com/questions/48993134/how-to-test-input-file-with-jest-and-vue-test-utils