我已经整理了一个很好的基本联系表格.但是我现在需要开始编写我的单元测试,并且遇到了大量问题(比如我到目前为止只能设法获得快照测试).
首先,如果您没有填写所有必需的部分,那么当您单击"提交"按钮时,我正在尝试测试表单应该呈现我的验证消息.
我以为我可以通过调用handleSubmit()
函数来实现这个目的:
componentRender.find('Formik').instance().props.handleSubmit(badFormValues, { resetForm });
但是,当我运行时componentRender.debug()
,我的验证消息没有被渲染.这就像没有调用validationSchema函数?
有什么特别需要做的吗?我觉得这个mapPropsToValues()
函数正在工作,从查看状态对象,它正在填充我传递表单的值.我只是不明白为什么验证似乎被跳过了?
我已经在这2天了,并且通过谷歌找不到任何好的例子(可能是我的错)所以任何帮助都会受到大力赞赏.
这里是参考测试文件到目前为止:
import React from 'react';
import { shallow, mount } from 'enzyme';
import { BrowserRouter as Router } from 'react-router-dom';
import PartnerRegistrationForm from 'Components/partner-registration-form/PartnerRegistrationForm';
describe('PartnerRegistrationForm component', () => {
const formValues = {
companyName: 'some company',
countryCode: 'GB +44',
telNumber: 12345678,
selectCountry: 'United Kingdom',
postcode: 'ABC1 234',
addressSelect: '123 street',
siteName: 'blah',
siteURL: 'https://www.blah.com',
contactName: 'Me',
email: 'me@me.com',
};
const componentShallow = shallow(<PartnerRegistrationForm {...formValues} …
Run Code Online (Sandbox Code Playgroud)我今天上班时遇到了来自我的 linter 包的异常错误。我查看了该包的文档,但我看不到 eslintrc 文件有任何问题。
这是我正在使用的内容的副本
{
"extends": "airbnb",
"parser": "babel-eslint",
"rules": {
"import/no-extraneous-dependencies": "off",
"import/extensions": "off",
"import/no-unresolved": "off",
"eol-last": "off",
"no-unused-expressions": ["error",{
"allowTernary": true,
"allowShortCircuit": true
}],
"react/jsx-indent-props": "off",
"react/jsx-indent" : ["error", 4, { "props": 4 }],
"indent": [ "error", 4],
"react/jsx-filename-extension": "off",
"jsx-a11y/anchor-is-valid": [
"error",
{
"components": [],
"specialLink": [
"hrefLeft",
"hrefRight"
],
"aspects": [
"noHref",
"invalidHref",
"preferButton"
]
}
],
"no-bitwise": "off"
},
"env": {
"browser": true,
"jest": true
}
Run Code Online (Sandbox Code Playgroud)
}
当我从命令行运行 eslint 时,我没有遇到任何问题,这使得这更加令人困惑!
任何帮助将不胜感激 :)