如何在酶/ Jest测试中切换和选中物料UI复选框
在酶/Jest测试中切换和选中物料UI复选框，可以通过以下步骤实现：
- 导入所需的测试工具和库：
- 导入所需的测试工具和库：
- 创建一个测试套件，描述测试的目标和行为：
- 创建一个测试套件，描述测试的目标和行为：
- 上述代码中，我们创建了一个测试套件（describe）并定义了一个测试用例（it）。使用 beforeEach 函数在每个测试用例执行之前创建复选框的测试实例。
- 获取复选框元素并模拟点击事件：
- 获取复选框元素并模拟点击事件：
- 我们首先通过
wrapper.find方法找到复选框元素，然后使用simulate方法模拟点击事件。 - 对复选框的状态进行断言：
- 对复选框的状态进行断言：
- 使用
expect断言复选框的checked属性是否符合预期。
以上是在酶/Jest测试中切换和选中物料UI复选框的步骤。物料UI是一款开源的React组件库，可用于构建现代化的用户界面。它提供了丰富的UI组件和样式，可用于快速构建美观且响应式的应用程序。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、对象存储（COS）、云数据库MySQL（CDB）、云原生容器服务（TKE）。
- 腾讯云云服务器（CVM）：提供可扩展的计算容量，用于运行应用程序、网站或服务。 产品链接：https://cloud.tencent.com/product/cvm
- 对象存储（COS）：可靠安全、低成本的云端对象存储服务，用于存储和访问各种类型的数据。 产品链接：https://cloud.tencent.com/product/cos
- 云数据库MySQL（CDB）：高可用、高性能的关系型数据库服务，适用于各种规模的应用程序。 产品链接：https://cloud.tencent.com/product/cdb
- 云原生容器服务（TKE）：基于Kubernetes的容器管理服务，简化容器集群的部署和管理。 产品链接：https://cloud.tencent.com/product/tke
这些产品可以提供云计算和开发所需的基础设施和工具，用于支持开发人员构建和部署各种应用程序。
相关·内容
1回答
我有一个用样式包装输入复选框元素的样式组件。在我的应用程序中，默认情况下可以选中此复选框。这是一些组件代码：
const InputCheckbox = styled.input.attrs((props) => ({
id: props.id,
type: 'checkbox',
checked: props.checked
}))`
visibility: hidden;
&:checked + label {
background-color: ${(props) => props.theme.
浏览 1提问于2019-05-07得票数 0
回答已采纳
1回答
因此，我开始从单元测试反应组件组成材料-UI组件使用Jest和酶设置。到目前为止，每个事件模拟都很正常，直到我遇到了物料UI中的Select。(下面有更多信息)
项目被引导使用创建-反应-应用程序和使用材料-ui-下一步。
依赖关系版本
反应: 16.2.0
React Dom: 16.2.0
反应-说明: 1.1.1
材料用户界面: 1.0.0-beta.35
Jest:一个装有安装程序的(22.4.3)
酶: 3.3.0
酶适配器反应16: 1.1.1
问题
我有一个名为FiltersDesktop的纯功能组件，它由Material表单字段组成。其中三个
浏览 1提问于2018-04-01得票数 8
回答已采纳
我正在将一个类组件重构为一个函数组件。
在我的测试文件中，我使用的是酶，但我正在迁移到react-testing-library
这是我用酶做的测试
it('should change module when clicked button login', () => {
const wrapper = mount(<SignUp setModuleCallback={jest.fn()} />)
const instance = wrapper.instance()
jest.spyOn(instance, 'setMo
浏览 2提问于2020-12-01得票数 1
我需要对下面的代码进行单元测试。如何编写相同的测试。
如何触发处理函数，该函数必须从传递给Popover的页脚属性的Button触发单击
const React, {Component} from 'react';
const {Popover, Button} from 'slds'; // Any UI library
class My Component extends Component {
render() {
return(
<Popover
footer={
浏览 0提问于2019-08-27得票数 1
我目前正在使用以下堆栈设置单元测试：
react (v15)组件使用类型记录(.tsx)编写
测试设置由jest(v21)和酶(V3)完成。
测试文件以普通js-文件的形式编写。
不幸的是，当我不断出错时，酶似乎出了点问题：
wrapper = enzyme.shallow(<Stepper>bla</Stepper>)
^
SyntaxError: Unexpected token <
at new Script (vm.js:51:7)
at Generator
浏览 1提问于2018-02-05得票数 1
回答已采纳
1回答
我对Jest和单元测试也很陌生，我想知道使用jest可以涵盖什么样的场景。
在我开始之前，我有一些具体的问题：
在单元测试中应该包括什么反应应用程序？
我是否需要其他有Jest的库来进行断言、嘲弄等等？我读过关于柴、西农等的文章。我不知道它们为什么会被使用，也不知道它们是否需要和Jest一起使用。
酶到底是用来做什么的？这是Jest必须使用的吗？
我需要像卡玛这样的小丑跑任务吗？或者Jest有一个内置的？我该怎么安排呢。
浏览 6提问于2017-08-09得票数 0
回答已采纳
2回答
我有一个围绕着Material UI复选框的简单组件。我在这里已经把它简化到了最低限度。 //@flow
import React from "react";
import { Checkbox } from "@material-ui/core";
function MyCheckboxComponent() {
const [checkedState, setCheckedState] = React.useState(true);
const handleChange = event => {
setCheckedState(e
浏览 41提问于2020-05-01得票数 6
回答已采纳
我建立了一个组件的反应和材料-UI。我用的是React和Redux。
我的index.jsx如下所示：
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import configureStore from '../store/conf
浏览 2提问于2017-04-09得票数 14
回答已采纳
我已经做了redux和saga测试，但现在我想测试结合redux-saga测试与酶和jest.is它可能与jest和酶。
浏览 18提问于2019-04-18得票数 0
我正在用Jest和酶为我的react组件编写测试用例。我有一个使用了indexOf方法的组件。现在，当我运行Jest时，它显示该特定行的测试未被覆盖。
覆盖范围报告：
浏览 2提问于2018-06-28得票数 0
当我挂载一个组件时，我得到了什么(浅层我没有得到这个错误)，我得到了下面的错误。
TypeError:无法读取未定义的属性“创建”
在(node_modules/@material-ui/core/CircularProgress/CircularProgress.js stylesOrCreator
。
。
。
还请将此错误放在顶部：
node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js Uncaught :无法读取未定义的属性“body2”
来自package.json的版本：
浏览 0提问于2020-07-27得票数 3
回答已采纳
我有一个使用酶的简单应用程序，我只想呈现html节点，而不是组件：
const container = mount(<Hello />);
expect(toJson(container)).toMatchSnapshot();
当前结果：
// Jest Snapshot v1
exports[`Hello should render 1`] = `
<Hello>
<a />
</Hello>
`
预期结果：
// Jest Snapshot v1
exports[`Hello should render 1`] = `
&
浏览 1提问于2019-07-26得票数 0
2回答
令我惊讶的是，许多博客都在编写单元测试，以便同时使用Jest和酵素进行反应应用程序。不能，我们用唯一的玩笑或唯一的酶来编写反应应用程序的单元测试？
如果是的话，为了得到一个成分，我们在酶中使用浅层()，而在Jest中使用什么？
浏览 5提问于2020-05-12得票数 0
回答已采纳
1回答
物料界面自动完成组件出库处理检查
、、、、
我有一个具有复选框组件的Material UI自动完成组件。我如何才能让它们都工作，以便只有当用户从自动完成中选择一个选项时，复选框才会被选中。下面是我的组件的链接：
浏览 16提问于2021-03-05得票数 0
我希望我的jest +酶单元测试能让saveSignUpFirstCreds调用：
this.setState({ requestInProgress: true, errorMessage: null }, () => {
return Api.registerPhone(values.phone)
.then(() => {
this.props.saveSignUpFirstCreds(values);
this.handleSubmitSuccess();
})
});
我的api有一个jest手册mock，到目前为止我的代码看起
浏览 0提问于2017-11-08得票数 2
是否有义务用Jest和酶来模拟useState钩子？因为对于一个简单的组件来说，这是很复杂的。
酶的simulate函数在这种情况下有效吗？
浏览 4提问于2022-01-02得票数 1
回答已采纳
我正在尝试验证是否选中了复选框，是否选中了我的XCTests代码。我看到在UI中选中了复选框，但是我的代码返回"NO“帮助是非常感谢的。下面是我的代码
XCUIElement *checkBox = [[[[textField childrenMatchingType:XCUIElementTypeOther] elementBoundByIndex:1] childrenMatchingType:XCUIElementTypeButton] elementBoundByIndex:1];
BOOL isChecked = checkBox.isSelected;
即使选中复选框，i
浏览 1提问于2018-04-13得票数 0
回答已采纳
1回答
如何测试没有呈现方法的本机类？
、、、、
我正在构建一个移动应用程序，并在尝试对代码进行单元测试时遇到了一个问题。目前，我确实在测试中同时使用了Jest和酶。
我如何能够在不包含呈现()方法和“扩展为组件”的特定类/文件中测试这些方法？此类用于从API中查询信息并将其保存到变量中。
关于Jest和酶的文献
似乎专注于测试呈现的组件。
浏览 1提问于2017-01-05得票数 0
回答已采纳
1回答
我开始学习用酶/Jest进行反应测试。我想要使用的一些测试是查看数据库中是否插入/更新了某些内容。我想知道如何用axios进行测试。我听说过axios-mock-adapter，可能会使用它。是否有一种方法可以模拟数据库插入/更新调用，而无需实际在实际数据库中插入/更新条目？
例如:我有一个向api端点发出post请求的方法，该端点将新条目插入到我的db中的表中。有没有办法用Jest/酶来测试这个
数据库不会被修改。
我可以得到一个响应，它告诉我如果要在实际的数据库中执行api调用是成功的。
我不确定这是否应该在react上进行测试，或者是否最好在后端使用数据库进行测试。
我对
浏览 2提问于2018-10-12得票数 1
如何使用jest/酶在react中测试setTimeout功能
setTimeout(() => {
}, 500);
我试着这样做：
expect(setTimeout).toHaveBeenCalledTimes(1);
expect(setTimeout).toHaveBeenLastCalledWith(() => { }, 500);
但是测试失败了，因为
Expected: [Function anonymous], 500
Received: [Function anonymous], 500
有人能帮我一下吗？？
浏览 0提问于2020-09-17得票数 0
1回答
我正在使用bare react原生测试驱动开发，并使用包jest和酶。我为UI组件安装了NativeBase。当我使用来自NativeBase的图标时，我得到了错误
FAIL src/screens/Welcome/Welcome.test.js
● Test suite failed to run
/Users/../node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/AntDesign.ttf:1
({"Object.<anonymous>":functio
浏览 1提问于2020-08-11得票数 1
2回答
如何在我的ui中有一个复选框alter my ui live？例如，如果该框未选中，我希望显示一个微调器，如果选中该框，我希望在微调器的位置显示一个文本框。我知道如何创建复选框并检查其状态，但我不知道如何隐藏和显示活动中的其他元素。
浏览 2提问于2010-10-06得票数 1
我最近为我的react项目做了jest酶的配置。问题是来自react代码的任何警告都会导致我的测试用例失败。有没有办法进行jest酶配置，这样即使出现一些警告，我的测试也能运行？我的代码是全功能的，我想忽略测试的警告，只想让我的测试用例运行，而不是在出现任何小警告时立即失败。
浏览 1提问于2017-05-20得票数 3
1回答
通常情况下，我的函数被导入到我想要使用jest/酶法测试的反应组件中。
通常，我可以通过wrapper.instance().functionName访问组件中定义的函数，然后测试函数是否已被调用。类似地，在测试中挂载组件时，我可以在as支持中传递一个模拟函数，然后检查该组件是否已被调用。但是，我没有方法来测试导入到组件中的函数(不是内部定义的，也不是作为道具定义的)。
是否有一种方法可以使用jest/酶法来定义一个将用于组件测试的全局模拟函数，该函数将覆盖已导入到我测试的组件中的同名函数的实现？
浏览 0提问于2019-03-22得票数 3
回答已采纳
我正在尝试使用jest和酶法测试一个react组件，我已经为它们安装了必要的包，然后按照下面所示配置了我的setupTests.js，但是仍然存在相同的错误，即没有找到酶模块，也有“浅的”错误。这就是我试着用浅酶的地方
import React from "react";
import { render, screen, cleanup } from '@testing-library/react'
import { shallow } from "@wojtekmaj/enzyme-adapter-react-17"
//some nece
浏览 2提问于2021-12-27得票数 0
回答已采纳
如何使用jest和酶模拟点击window.confirm中的Ok或Cancel？
浏览 8提问于2018-02-11得票数 13
回答已采纳
我实现了类似于提供的示例。我在访问avatar={}中的复选框时遇到了问题。这个项目正在使用Jest/酶进行测试。为了简单起见，下面的示例是直接从他们的文档中添加的id。我在想要测试的东西中添加了ids，以便更容易地使用.find函数。
export interface IListItem {
itemId: number;
itemName: string;
isChecked: boolean;
}
interface IProps {
listName: string;
list: IListItem[];
setList: any;
}
func
浏览 1提问于2020-07-06得票数 1
回答已采纳
我正在使用jest和酶来测试使用资料UI库编写的应用组件。然后，在我的一个包中，我得到了一个错误
浏览 4提问于2022-02-10得票数 -3
长期以来，我们一直使用酶来测试我们的反应组分，但我们已经开始逐步迁移到反应测试库中。
当尝试在RTL测试中使用toHaveValue匹配器时，它会失败，因为同名的酶匹配器将被调用。有没有一种方法，我可以“告诉”一个特定的测试文件使用匹配从玩笑？
根据安装文档，我已经将酶和jest匹配器添加到我的存储库中。
浏览 4提问于2021-12-17得票数 0
js和react newbie...playing以及测试框架……下面是代码：
import React from 'react';
// import CheckboxWithLabel from '../CheckboxWithLabel';
import {shallow} from 'enzyme'; //not installed...
//var x = require ('../CheckboxWithLabel.js');
test('CheckboxWithLa
浏览 1提问于2018-11-15得票数 15
回答已采纳
6回答
目前，我正在使用带有react钩子的功能组件。但是我无法完全测试useState钩子。考虑这样的场景，在useEffect钩子中，我正在做一个API调用并在useState中设置值。对于jest /酶，我有要测试的模拟数据，但我无法为jest中的useState设置初始状态值。
const [state, setState] = useState([]);
我想在jest中将初始状态设置为对象数组。我找不到任何类似于类组件的setState函数。
浏览 7提问于2019-07-14得票数 34
3回答
Jest和酶有什么区别？
、、、、
我刚开始做单元测试。我想测试React项目。我从React文档开始，它将酶称为测试工具，这对我来说有点模糊。
Jest和enzyme有什么区别？
enzyme断言库还是任务运行程序？
我能用karma和Jasmine吗？
测试react-redux项目的最佳方法是什么？
浏览 9提问于2017-03-06得票数 47
我有一个React + TypeScript应用程序，这是SSR。我将Material-UI与SSR指令一起使用，如下所述： https://material-ui.com/guides/server-rendering/ 我的很多组件都是有状态的，我用Jest + Enzyme来测试它们。下面是一个这样的组件： export interface CounterProps {
propExample: string;
classes: any;
}
export interface CounterState {
counter: number;
error: boolean
浏览 18提问于2019-06-02得票数 1
我正在寻找开发一个React JS应用程序，但我想从TDD的角度出发。我希望为这项工作开发一个测试套件，这样我就可以在Chrome、Firefox、Edge和Safari中运行测试。然后围绕这些测试编写DEV代码，使测试通过。
我研究过酶和Jest。这两个框架看起来都更像单元测试框架，而不是UI功能测试框架(有点像Webdriver / Selenium)。对我来说，更重要的是验证适当的UI元素是否按预期出现在页面上，而不是验证React组件是否呈现。
有人能建议我使用什么框架和包来完成这个任务吗？
浏览 2提问于2018-08-13得票数 0
我刚开始使用语义UI，我有一个愚蠢的问题。我有两个复选框，其类名为"ui切换复选框“。当页面加载时，我希望根据某些条件选中这些复选框。
<div class="ui toggle checkbox " id="ssl">
<input type="checkbox" name="SSL" >
<label>3</label>
</div>
<br>
&l
浏览 6提问于2017-06-27得票数 0
回答已采纳
1回答
如何使用Jest和酶测试FlatList？我不知道如何检查它是否有keyExtractor。
it('flatlist should have keyExtractor', () => {
wrapper
.find('FlatList')
.props()
.keyExtractor();
});
});
浏览 14提问于2019-10-24得票数 0
回答已采纳
使用jest和酶在react中编写单元测试。在检查组件状态时，它抛出错误"ReactWrapper:: state ()仅能在类组件上调用“。 import React from 'react';
import { mount } from 'enzyme';
import expect from 'expect';
import CustomerAdd from '../CustomerAdd'
import MUITheme from '../../../../Utilities/MUITheme';
浏览 27提问于2019-10-17得票数 4
回答已采纳
我正在为我的react项目编写单元测试用例，并使用jest和酶来编写测试用例。我看过那些开玩笑的文件
这解释了jest.spyOn()方法，但我没有完全理解。
因此，我想知道更多关于我们应该使用jest.fn()和应该/必须在哪里使用jest.spyOn()的具体位置的详细信息。这将是一个很大的帮助，如果可以解释为两个方法的例子。
谢谢
浏览 2提问于2019-08-25得票数 84
我正在使用jest和酶对react组件进行测试，还没有想出如何从material-ui菜单中测试onClose事件。这同样适用于其他组件，但为了这个问题，我们可以坚持使用菜单。这是我的组件：
import { Menu, MenuItem } from "@material-ui/core";
export class ItemPreviewerPage extends React.Component<ComponentProps, ComponentState> {
constructor(props) {
super(props);
thi
浏览 0提问于2018-10-12得票数 0
我试着用Jest +酶测试useState和useEffect的反应钩子，但是我找不到方法，有人能帮忙吗？
const [sPlaceholder, setSPlaceholder] = useState('');
useEffect(() => {
setSPlaceholder('abcd');
if (s === '') {
dispatchUpdateSPlaceholder(searchPlaceholder);
}
}, [sPlaceholder]);
浏览 1提问于2019-05-09得票数 4
回答已采纳
我对JavaScript测试非常陌生，并且正在开发一个新的代码库。我想编写一个测试，用于检查元素上的className。我和Jest和一起工作。下面我有一个测试，它将呈现一个基于variant支柱的按钮。它还包含一个className，我想对它进行测试。
it('Renders with a className equal to the variant', () => {
const { container } = render(<Button variant="default" />)
expect(container.fir
浏览 0提问于2018-11-20得票数 146
回答已采纳
我正在尝试为我的React组件编写一个测试，使用TypeScript、Jest作为我的测试运行器，并使用酶来测试我的React组件。每当我将我的组件传递给shallow酶函数时，我就会得到ts错误"'Navbar‘引用了一个值，但在这里被用作一个类型。“，下面我得到了一个eslint错误"Parsing error：'>’expected”。
我在其他一些组件上尝试过，当作为参数传递到shallow函数时，所有组件都有相同的错误。我怀疑这可能与我的TS配置有关，但在我的生活中，我似乎找不到解决方案。
下面是Navbar.tsx的代码：
import Rea
浏览 1提问于2019-10-11得票数 20
回答已采纳
2回答
我有一个带有几个复选框的下拉菜单，我试图在每个复选框上添加onClick事件。但是当我检查其中一个复选框时，所有的复选框都会被选中。这就是我想做的：
const [isChecked, setIsChecked] = React.useState(false);
const isCheckboxChecked = () => {
setIsChecked(isChecked ? false : true)
}
return menuItems.map((item, index) => (
<React.Fragment>
浏览 5提问于2020-06-30得票数 0
回答已采纳
我正在寻找一个使用React，Jest和酶的解决方案。我是这些技术的新手。
我可以运行几个简单的测试。下面是我想要测试的：
<div className="trow">
<div className="tcolid" >101</div>
<div className="tcolname">Joe</div>
<div className="tcolgender">M</div>
浏览 13提问于2019-10-20得票数 1
回答已采纳
我有以下代码：
class Dummy extends React.Component {
constructor(props) {
this.state = { field: '' }
}
componentDidMount() {
PubSub.subscribe('event', () => {
this.setState({ field: 'a' });
});
}
}
我想确保当我发布event时，状态设置为a。我如何使用Jest和酶来实现这一点？
浏览 0提问于2018-08-31得票数 4
回答已采纳
5回答
我已经读过src/setupTests.js应该在每个测试之前加载，但是我仍然看到每个测试都失败了，错误：
“酶内部错误:酶期望配置适配器，但没有发现任何适配器。”
这是我的src/setupTests.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'whatwg-fetch';
Enzyme.configure({ adapter: new Adapter() });
这是我的package.json：
浏览 3提问于2018-12-05得票数 10
回答已采纳
假设我有这个功能反应组件。
const SomeComponent = ({ onShow }) => {
React.useEffect(onShow, []);
return <div />;
};
现在我要进行单元测试，SomeComponent在第一次呈现时调用onShow。
可以用enzyme吗？
我试过实现两种非常相似的测试，区别是第一种是使用酶，另一种是使用反应测试库。
使用react测试库的测试通过了，但是酶测试失败了，尽管它们测试的代码相同。
示例：
import * as reactTestingLibrary from "react-t
浏览 1提问于2019-05-10得票数 3
我在前端使用codegen来生成类型，并使用graphql查询来获取这种格式的数据。 const { data, loading, error } = useSampleQuery({
variables: {
a: 1,
b: 2
}
}) 我正在使用jest和酶来测试我的react组件。
浏览 5提问于2021-05-10得票数 0
1回答
有任何方法可以使用useAuthState作为模拟来模拟用户身份验证的状态吗？
到目前为止，我尝试过的内容包括: React测试库、酶组件渲染、jest.mock、jest.createMockFromModule。我知道如果我没有将我的组件包含在一个提供程序中，我将得到“无法找到react redux上下文值；请确保组件被包装在一个提供程序中”。
import React from 'react';
import { makeStyles } from '@material-ui/core';
import Typography from '@mate
浏览 10提问于2022-02-05得票数 0
我在模拟Jest测试中的一个React组件，flow在抱怨：
[flow] string (This type is incompatible with the expected return type of React$Element)
我怎么允许这样做呢？这是我的密码：
jest.mock('../../../../ui-components/lib/Forms/TextField', () => {
const React = require('react');
const TextField = class extends React.Co
浏览 2提问于2017-06-06得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
