The scenario
尝试使用Jest(和Enzyme)测试一个简单的React组件 . 这个组件使用 react-dropzone
,我想测试一些涉及DOM的操作,所以我使用jsdom(已经由 create-react-app
配置)
The problem
我的测试代码中可用的 document
对象也可以在组件内部使用,它位于dropzone onDrop
回调内部 undefined
,这会阻止测试运行 .
The code
MyDropzone
import React from 'react'
import Dropzone from 'react-dropzone'
const MyDropzone = () => {
const onDrop = ( files ) =>{
fileToBase64({file: files[0]})
.then(base64Url => {
return resizeBase64Img({base64Url})
})
.then( resizedURL => {
console.log(resizedURL.substr(0, 50))
})
}
return (
<div>
<Dropzone onDrop={onDrop}>
Some text
</Dropzone>
</div>
);
};
const fileToBase64 = ({file}) => {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = () => {
return resolve(reader.result)
}
reader.onerror = (error) => {
return reject(error)
}
reader.readAsDataURL(file)
})
}
/**
* Resize base64 image to width and height,
* keeping the original image proportions
* with the width winning over the height
*
*/
const resizeBase64Img = ({base64Url, width = 50}) => {
const canvas = document.createElement('canvas')
canvas.width = width
const context = canvas.getContext('2d')
const img = new Image()
return new Promise((resolve, reject) => {
img.onload = () => {
const imgH = img.height
const imgW = img.width
const ratio = imgW / imgH
canvas.height = width / ratio
context.scale(canvas.width / imgW, canvas.height / imgH)
context.drawImage(img, 0, 0)
resolve(canvas.toDataURL())
}
img.onerror = (error) => {
reject(error)
}
img.src = base64Url
})
}
export default MyDropzone;
MyDropzone.test.jsx
import React from 'react'
import { mount } from 'enzyme'
import Dropzone from 'react-dropzone'
import MyDropzone from '../MyDropzone'
describe('DropzoneInput component', () => {
it('Mounts', () => {
const comp = mount(<MyDropzone />)
const dz = comp.find(Dropzone)
const file = new File([''], 'testfile.jpg')
console.log(document)
dz.props().onDrop([file])
})
})
setupJest.js
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() })
Config
-
默认
create-react-app
jest配置,setupJest.js
已添加到setupFiles
-
运行:纱线测试
Error
TypeError: Cannot read property 'createElement' of undefined
at resizeBase64Img (C:\dev\html\sandbox\src\MyDropzone.jsx:44:29)
at fileToBase64.then.base64Url (C:\dev\html\sandbox\src\MyDropzone.jsx:8:20)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
More info
考虑到如果在浏览器中运行该代码,则始终定义 document
,因此对我来说问题似乎与jsdom或Jest有关 .
我不确定它是否与Promise,FileReaded或JS范围有关 .
可能是Jest方面的一个错误?
1 回答
所以我能够解决这个问题 . 假设它在没有任何配置更改的情况下工作是错误的 . 首先,您需要添加更多包 . 以下是我更新的
package.json
我还从测试脚本中删除了
--env=jsdom
. 因为我无法使用这种组合之后,您需要创建一个
src/setupTests.js
,它是测试的加载全局变量 . 这个你需要加载jsdom
和enzyme
之后,您的测试会出错并出现以下错误
问题似乎是
FileReader
应该引用window
范围 . 所以你需要像下面这样更新它然后再次运行测试
现在测试工作正常