使用Formik和Jest / Enzyme对文本字段进行单元测试
Formik是一个用于构建表单的React库，它简化了表单处理的复杂性。Jest和Enzyme是用于React应用程序的测试框架和工具。
在使用Formik和Jest / Enzyme对文本字段进行单元测试时，可以按照以下步骤进行：
- 安装Formik和相关依赖：
- 安装Formik和相关依赖：
- 创建一个包含文本字段的表单组件：
- 创建一个包含文本字段的表单组件：
- 创建单元测试文件，例如
MyForm.test.js： - 创建单元测试文件，例如
MyForm.test.js： - 运行测试：
- 运行测试：
这样，你就可以使用Formik和Jest / Enzyme对文本字段进行单元测试了。这些测试可以确保文本字段能够接收输入，并且在提交表单时调用正确的处理函数。
腾讯云提供了一系列与云计算相关的产品，其中与前端开发和测试相关的产品包括：
- 云服务器 CVM：提供可扩展的云服务器实例，用于部署和运行前端应用程序。
- 云函数 SCF：无服务器计算服务，可用于编写和运行前端应用程序的后端逻辑。
- 云开发 TCB：提供全托管的后端服务，包括数据库、存储、云函数等，方便前端开发者快速构建应用。
- CDN 加速：提供全球加速服务，加速前端应用程序的内容分发，提高访问速度和用户体验。
以上是一些腾讯云的产品，可以用于支持前端开发和测试的需求。
相关·内容
1回答
在测试onSubmit时，我希望模拟API调用，而不是进行实际的API调用
reactjs、redux、jestjs、formik、redux-mock-store
我使用formik和useDispatch作为表单和提交功能。只有当我注释掉API调用代码时，我才能够测试该操作是否在提交时发出。如果我不评论，抛出一个错误。
如何调用模拟API调用而不是实际的API？或如何为formik+asynchronous API调用使用redux模拟存储。
ForgotPassword.js:
<>
<Typography variant='h6'>Recover Password</Typography>
<Formik
initialValues={{ userna
浏览 7提问于2019-12-03得票数 1
回答已采纳
1回答
如何用酶和Jest测试Formik字段？
javascript、reactjs、jestjs、enzyme、formik
我想测试特定类型的输入域是否用酶来渲染。我为我的表单使用Formik。但每次我为特定用例编写测试时，我都会从酶那里得到这个奇怪的对象错误。 Expected value to have length:
1
Received:
{Symbol(enzyme.__root__): {Symbol(enzyme.__root__): [Circular], Symbol(enzyme.__unrendered__): <WithFormik(AddEditUser) />, Symbol(enzyme.__renderer__): {"b
浏览 19提问于2019-02-13得票数 0
2回答
未调用Enzyme form onsubmit
reactjs、mocha.js、enzyme
我在任何地方都找不到合适的答案。我希望它不是复制品。我有一个简单的酶测试脚本来模拟表单提交，这是我用ES6语法中的Reactjs编写的。我正在使用mocha作为我的测试跑步器。当我试图模拟表单的'submit‘时，onSubmit函数没有被调用。我正在测试的js文件：
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
construct
浏览 7提问于2017-02-05得票数 1
2回答
测试react-final-form更改事件
reactjs、enzyme、react-final-form
有人能告诉我如何测试这个简单的行为吗?我已经尝试了很长时间来解决这个问题，我希望我只是遗漏了一些东西，因为更改事件应该很容易测试。
我尝试调用onChange而不是simulate，wrapper.update()，await new Promise(resolve => setTimeout(resolve))没有结果。
import * as React from 'react';
import { Form, Field } from 'react-final-form';
import { mount } from 'enzyme'
浏览 1提问于2019-07-24得票数 3
1回答
用酶测试简单的剩余形式(值在哪里？)
reactjs、redux、enzyme、redux-form
我有一个连接到redux示例的最简单的redux表单：
import * as React from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
class TestForm extends React.PureComponent {
render() {
return (
<form>
<Field c
浏览 1提问于2019-02-13得票数 2
回答已采纳
1回答
如何通过更改useState来测试React Hooks组件
reactjs、unit-testing、jestjs、react-hooks、enzyme
我有一个React hooks功能组件，我想用Jest/Enzyme来测试它。我想根据一个useState值来测试它的第三级渲染行为。我似乎在网上找不到任何例子。没有‘点击’来模拟-没有API调用来模拟，因为在最后，我仍然需要基于useState值进行测试。在过去，使用类组件，我可以设置状态。有了新的钩子，我就不能了。所以，基本上-我如何在一个模拟的submitForm函数中模拟一个异步等待，以便渲染正常运行？
下面是我的组件：
import React, { useState } from 'react';
import { Redirect } from 'reac
浏览 3提问于2020-02-09得票数 5
2回答
Jest模拟API函数导致反应“行为”警告，状态不被更新。
reactjs、jestjs、enzyme
通过测试一个function函数组件，表单提交中的这个组件调用了我所模拟的helper函数。
下面的代码给了我警告:在测试中对SomeComponent的更新没有包装在act(.)中。并且不更新组件的状态。
构件伪码
import React, { memo } from "react"
import { apiFunc } from "./API";
function SomeComponent() {
onSubmit = async () => {
const response = await apiFunc();
浏览 2提问于2019-12-24得票数 1
1回答
mocha/chai如何测试方法在then或catch回调中调用
reactjs、testing、mocha.js、enzyme、chai
我正在试着测试这样的东西： // component.js
import React from 'react';
import AsyncModule from '../some/async/module';
import { doSomething } from '../myModule';
.
.
.
const onSubmit = () => {
const opts = {/* some config */};
AsyncModule(opts).someAsyncCall().then(resolved =>
浏览 10提问于2019-12-13得票数 0
回答已采纳
1回答
redux表单提交测试时，酶测试失败
reactjs、react-redux、jestjs、redux-form、enzyme
我有一个使用redux表单的SignUp React组件，我的onSubmit基本上就是分派一个异步操作。我正在尝试使用酶和Jest测试我的组件，方法是将一个spy添加到我的调度中，并检查在模拟表单提交时是否调用了调度。但是，我的测试失败了。
这是我的SignUp redux表单组件：
import React from 'react';
import {reduxForm, Field, focus} from 'redux-form';
import Input from './input';
import {required, nonEmp
浏览 0提问于2017-11-04得票数 0
1回答
为什么我的React单元测试中一直收到‘接收到的调用数: 0’错误？
reactjs、unit-testing、jestjs
我刚开始使用React单元测试，在尝试测试表单提交时是否调用了handleSubmit方法时，我一直收到错误：Received number of calls: 0： 错误： Expected number of calls: 1
Received number of calls: 0
9 | const form = wrapper.find('form');
10 | form.simulate('submit');
> 11 | expect(onSubmitFn).toH
浏览 37提问于2020-08-07得票数 2
回答已采纳
1回答
用jest和酶模拟FlatList动作
reactjs、react-native、jestjs、enzyme
我正在为一个呈现FlatList的组件编写一些单元测试，我需要模拟一些动作，比如scrollTo和scrollToEnd。
谁知道我怎么才能做到这一点？
我正在使用Jest和Enzyme进行测试。
import React form "react";
import { FlatList } from 'react-native';
import { mount } from 'enzyme';
describe("<FlatList/>", () => {
const callback = jest.fn(
浏览 12提问于2019-08-12得票数 0
1回答
警告:测试内部应用程序的更新未包含在act(...)中在酶和钩子中
reactjs、jestjs、react-hooks、enzyme、act
我已经编写了这个组件。它使用钩子和状态来获取数据。获取后，加载状态将更改为false，并显示侧边栏。 我遇到了Jest和Enzyme的问题，因为它确实在我的单元测试中为Act抛出了一个警告。一旦我将动作添加到我的笑话和酶中，测试就失败了！ // @flow
import React, { useEffect, useState } from 'react';
import Sidebar from '../components/Sidebar';
import fetchData from '../apiWrappers/fetchData'
浏览 9提问于2020-08-25得票数 8
1回答
当节点模块具有es6语法时，Jest无法运行(创建-反应-应用程序)
javascript、reactjs、npm、jestjs、enzyme
我有一个create-react-app项目，并试图使用Jest和Enzyme对office-ui-fabric-react组件进行单元测试。
最新版本的office-ui-fabric-react使用es6语法，jest无法运行测试。
import { mount } from "enzyme";
import React from "react";
import { MessageBar, MessageBarType } from "office-ui-fabric-react/lib/MessageBar";
describe("
浏览 0提问于2018-12-05得票数 0
3回答
react-native中的测试按钮onClick函数
javascript、ios、react-native、jestjs、enzyme
我正在尝试使用react原生框架编写我的第一个应用程序。我在测试按钮的onClick函数时有问题。
我的App.js代码：
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button } from 'react-native';
export default class App extends React.Component {
refreshData() {
console.log("do
浏览 0提问于2018-03-10得票数 4
1回答
初学者在使用react单元测试测试react material ui窗体时遇到错误
reactjs、jestjs、material-ui、enzyme、formik
我有一个简单的表单，只有一个文本字段。我使用了react material ui库和formik来进行验证和验证。我无法通过使用酶的浅层方法获得表单中的文本字段。不知道我做错了什么。 declarationForm.js import React, { useState, useEffect } from 'react';
import * as Yup from 'yup';
import { Formik } from 'formik';
import { useNavigate, Prompt } from "react-rout
浏览 18提问于2020-12-31得票数 0
2回答
模拟函数不被调用时，在内部'if‘语句-反应应用程序测试与玩笑和酶？
reactjs、jestjs、mocking、enzyme、react-testing
我正在为我的function应用程序编写一个测试用例，我试图用一个模拟函数来模拟一个按钮点击。我将模拟函数作为支柱传递，并在' if‘语句中调用函数，但模拟函数没有被调用，测试失败，但是如果没有'if’语句调用函数，则调用它并通过测试。为什么会发生这种情况？
Form.js
const Form = ({ text, incompleteList, setIncompleteList }) => {
const submitTodoHandler = (e) => {
e.preventDefault()
if (text !== '
浏览 3提问于2021-06-15得票数 0
回答已采纳
1回答
React/Jest/酶法:如何测试添加文本以输入和检查文本？
javascript、reactjs、react-redux、jestjs、enzyme
我们有一个表单，有一个简单的输入和提交按钮。提交后，将在section.user-list中添加li的内容。
键入ni并单击Search按钮后，2 lis将输入视图，其中一个包含"Nick Sims“。
但是，在运行下面的测试之后，视图从未改变，测试将选择默认的“搜索用户”字符串，该字符串应该由新的lis替换。
注意，在我们的应用程序中，有一个调度函数，它将一个Redux操作调用到SEARCH_USERS以返回用户列表，这会是问题吗？
import React from 'react'
import { shallow, mount } f
浏览 2提问于2017-07-21得票数 2
回答已采纳
1回答
Jest/酶测试表单组件
javascript、reactjs、jestjs、enzyme
我正在我的react应用程序上测试表单组件。我在这里得到了一个与未解决的帖子(Testing form input in jest and enzyme)类似的错误。 我尝试了下面两种不同的form.test.js方法，都不能通过测试。 //simple form component
import React from "react";
import Checkbox from "../checkbox/checkbox.component";
import { withRouter } from 'react-router-dom';
c
浏览 15提问于2020-09-22得票数 0
回答已采纳
1回答
在React Native中使用Jest和Enzym进行单元测试
react-native、jestjs、enzyme
如何使用jest和酶找到组件内部的元素？ 假设我有一个组件父组件( Login )和两个子组件(Title和Form)，那么在组件登录中，我想要找到Form组件中是否有TextInput元素或其他元素，以及Form组件中的其他元素，使用jest和酶，那么我如何才能仅用1个单元测试(Login.test.js)就能获得呢？ 这是我的插图登录组件 <Login>
<Title title='Login Page' />
<Form
email={this.state.email}
password={this.state
浏览 17提问于2020-01-18得票数 2
1回答
测试父组件中子组件的按钮。
javascript、reactjs、jestjs、enzyme
我是新的测试和搜索，从3天以来，如何解决我的问题。希望你能帮我..。我有一个父组件：
import React from 'react';
import './Subscribe.scss';
import Button from '../../Components/Button/Button';
class Subscribe extends React.Component {
state = {
user: {
firstName: '',
pseudo
浏览 2提问于2019-12-01得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
