因此，我试图编写一个简单的测试，在该测试中，我向输入添加了一个文件。要素如下：
<input accept="image/*" className={classes.newPhotoInput} id="contained-button-file" type="file" name="doc" onChange={setPhoto} />
<label htmlFor="contained-button-file">
<Button id="photo" variant="outlined" component="span">
Загрузить новое фото
</Button>
</label>
测试如下：
it('check the callbacks', async ()=>{
const file = new File(['(⌐□_□)'], 'test.png', { type: 'image/png' });
const wrapper = mount(<AddDefect {...props}/>);
wrapper.find('#description').at(0).simulate('click');
wrapper.find('#descriptionfield').at(0).find('input').at(0).simulate('change', { target: { value: 'test' } })
const input = wrapper.find('#contained-button-file').at(0);
await waitFor(()=>{
userEvent.upload(input, file)
//{target:{files:[file]}}
})
expect(input.files.length).toBe(1);
wrapper.find('#send').at(0).simulate('click');
expect(onSendData).toHaveBeenCalled();
wrapper.find('#back').at(0).simulate('click');
expect(onBack).toHaveBeenCalled();
})
下面是我的包中发生的事情
"jest": {
"testEnvironment": "jsdom",
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
],
"moduleNameMapper": {
"\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|esm)$": "<rootDir>/__mocks__/fileMock.js",
"\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
},
"setupFilesAfterEnv": [
"./src/setupTests.js"
]
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.6",
"@babel/preset-react": "^7.14.5",
"@testing-library/dom": "^8.11.0",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"jsdom": "18.0.1",
"jsdom-global": "3.0.2",
"regenerator-runtime": "^0.13.9"
}
我在测试中遇到的错误：
TypeError: Cannot read property 'toLowerCase' of undefined
Ignored nodes: comments, <script />, <style />
<html>
<head />
<body />
</html>...
206 | const input = wrapper.find('#contained-button-file').at(0);
207 | await waitFor(()=>{
> 208 | userEvent.upload(input, file)
| ^
209 | })
210 | expect(input.files.length).toBe(1);
211 | wrapper.find('#send').at(0).simulate('click');
at isElementType (node_modules/@testing-library/user-event/dist/utils/misc/isElementType.js:15:37)
at Object.upload (node_modules/@testing-library/user-event/dist/upload.js:23:42)
at src/Components/ViewDefects/tests/AddDefect.test.js:208:23
at runWithExpensiveErrorDiagnosticsDisabled (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/config.js:50:12)
at checkCallback (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/wait-for.js:136:77)
at checkRealTimersCallback (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/wait-for.js:128:16)
在过去的几天里，我一直在努力解决这个问题，这就是我所取得的成就。谷歌搜索几乎没有帮助，没有发现一个问题有这样的问题。感觉我错过了一些简单的东西，但就是还没有得到。有什么帮助吗？
更换
userEvent.upload(input, file)
带有
fireEvent.change(input, { target: { files: { item: () => file, length: 1, 0: file } },})
为我工作
通过使用测试库而不是酶来克服这一问题，发现酶并不真正适合材料ui。