小编Fab*_*zzi的帖子

使用jest /酶对formik组件进行单元测试

我已经整理了一个很好的基本联系表格.但是我现在需要开始编写我的单元测试,并且遇到了大量问题(比如我到目前为止只能设法获得快照测试).

首先,如果您没有填写所有必需的部分,那么当您单击"提交"按钮时,我正在尝试测试表单应该呈现我的验证消息.

我以为我可以通过调用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)

javascript reactjs jestjs enzyme formik

7
推荐指数
1
解决办法
4631
查看次数

规则“re​​act/jsx-indent”的配置无效:值“4,[object Object]”不应超过 1 个项目

我今天上班时遇到了来自我的 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 时,我没有遇到任何问题,这使得这更加令人困惑!

任何帮助将不胜感激 :)

eslint eslint-config-airbnb eslintrc

3
推荐指数
1
解决办法
5488
查看次数