如何在Jest中测试React组件，直到再次收到道具？
在Jest中测试React组件，直到再次收到道具的过程可以通过以下步骤完成：
- 首先，确保已经安装了Jest和相关的测试库。可以使用以下命令进行安装：
- 首先，确保已经安装了Jest和相关的测试库。可以使用以下命令进行安装：
- 创建一个测试文件，命名为
Component.test.js，并导入需要测试的React组件和react-test-renderer库： - 创建一个测试文件，命名为
Component.test.js，并导入需要测试的React组件和react-test-renderer库： - 创建一个测试用例，使用
test函数，并在其中渲染组件并进行断言。在每次测试之前，可以使用renderer.create方法创建一个组件实例，并使用getInstance方法获取组件实例的引用： - 创建一个测试用例，使用
test函数，并在其中渲染组件并进行断言。在每次测试之前，可以使用renderer.create方法创建一个组件实例，并使用getInstance方法获取组件实例的引用： - 运行测试命令，可以使用以下命令运行测试：
- 运行测试命令，可以使用以下命令运行测试：
这样，就可以在Jest中测试React组件，在接收到新的道具时进行断言。在测试过程中，可以使用renderer.create方法创建组件实例，并使用update方法更新组件的道具。然后，可以通过获取组件实例的引用来断言道具的更新情况。
对于Jest中测试React组件的更多信息，可以参考腾讯云的React开发文档：React开发文档。
相关·内容
1回答
为什么我的jesttest中的get方法不是一个函数？
unit-testing、reactjs、jestjs
我的jest单元测试如下所示：
import React from 'react';
import renderer from 'react-test-renderer';
import ReactTestUtils from 'react-dom/test-utils'
import Calculator from "./calculator";
test('test that calculator', () => {
const component = renderer.create(
浏览 2提问于2017-07-28得票数 0
回答已采纳
2回答
jest不创建快照
reactjs、jestjs、snapshot
我已经创建了一个jest测试文件below.But，没有创建该文件的快照。我的代码中有什么问题？
import React from 'react';
import Carousel from './component';
import renderer from 'react-test-renderer';
test('Carousel Component Test Suite', () => {
const component = renderer.create(
<Carousel
/&
浏览 1提问于2017-08-18得票数 5
1回答
用道具开玩笑快照
javascript、reactjs、jestjs、snapshot
我试图对这个组件做一个快照：
export default class LoginExternalApi extends Component {
constructor(props) {
super(props);
}
render() {
let store = this.props.store.getState();
return (
<View style={styles.container}>
{store.facebookToken ? null : <FacebookButtonConnect /
浏览 5提问于2017-04-11得票数 5
回答已采纳
1回答
React酶不能测试点击功能
javascript、reactjs、jestjs、enzyme
]1 这是我在图像和测试代码中组件完整代码 import React from 'react';
import Enzyme, { shallow, mount } from 'enzyme';
import ProfileCard from '../profileCard';
import Adapter from 'enzyme-adapter-react-16';
import InfoCard from '../infoCard';
import renderer from 'react-test
浏览 24提问于2020-04-04得票数 1
回答已采纳
1回答
当我试图运行测试时，在开玩笑时出错
javascript、unit-testing、react-native
这是控制台中的错误：Cannot find module 'expo' from 'setup.js'。
下面是我的代码：
component.test.js
import React from 'react';
import MyComponent from '../components/Component';
import renderer from 'react-test-renderer';
test('create component correctly', () =>{
c
浏览 1提问于2017-10-23得票数 1
回答已采纳
2回答
使用redux-mock-store进行单元测试--我怎样才能让这个单元测试通过？
reactjs、redux、enzyme、jestjs、redux-mock-store
我刚刚开始使用jest和酶。
我有一个问题，使我的单元测试工作。我正在使用redux- mock -store来模拟store对象。
it('shows an li for each comment', () => {
expect(container.find('li').length).toBe(2);
});
我期望有两个li元素，但是我得到了0个li元素。
我在这个错误中纠结了很长时间。
有没有人能帮我弄清楚怎样才能通过这项测试！？
来自jest test runner的测试结果
Error: expect(received).toBe(e
浏览 25提问于2017-06-27得票数 1
回答已采纳
1回答
无法在jest中从react组件触发回调函数。
reactjs、jestjs
我试着为一个简单的天气网络应用程序写一些开玩笑的测试，我用它做出了反应。当我运行我的测试时，它会创建组件的快照，它看起来很好，但是当我试图触发一个单击事件时，我会得到一个类型错误：
TypeError: tree.props.handleClick is not a function
我使用jest文档来编写这个测试，我认为这就是您触发单击事件的方式。我是否没有正确引用单击函数？我是新手编写测试，所以任何关于编写测试的信息都是欢迎的！
反应代码
import React from "react"
import { useEffect, useState } from '
浏览 7提问于2022-10-16得票数 0
回答已采纳
2回答
使用Jest和Redux的异步组件快照
reactjs、asynchronous、redux、jestjs
我发现Jest在测试Redux React应用程序时非常有用。然而，有很多关于如何测试异步操作创建器的例子，但我真的不知道如何对异步组件进行快照。
我想做的是类似于的东西。它们调用一个道具函数onMouseEnter()，然后拍摄快照。如果onMouseEnter()调度使用Redux Thunk创建的异步操作，有什么简单的方法可以做到这一点吗？
这就是我的thunk的样子，它使用axios。
// test-api.js
export function getLinkInfo() {
return function(dispatch) {
return axios.ge
浏览 0提问于2017-03-14得票数 3
1回答
获取“不变冲突:本机模块不能为空”。当我做测试时
javascript、reactjs、react-native、jestjs、enzyme
我有一个登录组件如下所示，我正在为这个组件编写一些测试用例。当我试图运行测试时，我得到了以下错误：
测试
import renderer from 'react-test-renderer'
import Login from '../Login'
let props, wrapper
beforeEach(() => {
props = {
loginAttempt: jest.fn(),
recoverAttempt: jest.fn(),
reset: jest.fn()
}
wrapper = shallow
浏览 0提问于2018-12-21得票数 13
1回答
jest测试react + redux在prop中说未定义的值
reactjs、redux、jestjs
我正在测试一个用React和Redux在Jest中编写的程序，在控制台中我得到了这个错误。 console.error
Warning: Failed prop type: The prop `prop` is marked as required in `Component`, but its value is `undefined`. 这是我为测试编写的代码： import React from 'react';
import { Provider } from 'react-redux';
import renderer from 'reac
浏览 19提问于2020-12-13得票数 0
回答已采纳
2回答
用window.require测试电子/反应元件
reactjs、electron、jestjs
我目前正在创建一个电子应用程序，它使用React来创建接口。为了访问fs，我一直在使用：
const fs = window.require('fs');
当你在电子窗口工作的时候。
问题是，当我为使用window.require('fs')的任何组件编写jest测试时，在运行测试时会得到以下错误。
TypeError: window.require is not a function
我已经查看了Jest的文档，解决方案似乎是使用手动模拟生成一个模拟窗口(请参阅上“在JSDOM中未实现的模拟方法”)。但是，当我试图通过添加测试文件的顶部来模拟window.re
浏览 0提问于2019-04-30得票数 10
回答已采纳
1回答
Jest基础:从组件测试功能
javascript、unit-testing、reactjs、jestjs
我有一个基本的功能：
组件/第一组件：
sayMyName = (fruit) => {
alert("Hello, I'm " + fruit);
return fruit;
}
当我尝试用FirstComponent.test.js内部的Jest测试它时：
import FirstComponent from '../components/FirstComponent';
describe('<FirstComponent />', () => {
it('tests the
浏览 3提问于2017-08-03得票数 10
回答已采纳
1回答
React-在componentDidMount中调用Native Jest测试函数
javascript、unit-testing、react-native、tdd、jestjs
我正在尝试测试是否在我的组件的componentDidMount钩子中调用了函数。
我使用React-Native和Jest来测试我的组件。
该组件如下所示：
const tracker = new GoogleAnalyticsTracker('UA-79731-33');
class MyComponent extends Component {
componentDidMount() {
tracker.trackScreenView(this.props.title);
}
}
所以我模拟了一下GoogleAnalyticsTracker
浏览 1提问于2017-02-20得票数 2
1回答
带有act()错误的React组件的Jest单元测试
reactjs、jestjs、react-hooks、react-testing-library、react-state
我在这里遇到了一个困扰我的问题，我不知道该如何解决这个问题。我有一个非常简单的React函数组件，它使用useState钩子，但是我在为它编写测试用例(在Jest中)和用@testing-library/react时遇到了问题。
以下是该组件的主要内容：
// MyComponent.jsx
import InputComponent from '/some/folder/InputComponent';
...
export function MyComponent() {
const [randomStateVariable, setRandomStateVar
浏览 2提问于2021-01-19得票数 0
回答已采纳
4回答
酶法:方法“text”只能在单个节点上运行。0找到
reactjs、jestjs、enzyme
我用的是React v15.4，babel-jest v18和酵素v2.5.1
我有一个简单的反应组件：
import React, {Component} from 'react'
import {FormattedRelative} from 'react-intl'
import pageWithIntl from '../components/PageWithIntl'
import Layout from '../components/Layout'
class About extends Component {
浏览 6提问于2017-03-28得票数 16
回答已采纳
1回答
搞笑模拟“点击”工作古怪，测试失败
javascript、reactjs、jestjs、enzyme
我正在尝试测试一个简单的组件，看起来如下
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import styles from './styles.css'
export class App extends PureComponent {
handleClick = (event) => {
const { loadGreetings } = this.props
loadGreetings()
}
浏览 2提问于2019-11-03得票数 0
1回答
流星里的小丑？
reactjs、meteor、mocha.js、chai、jestjs
我想在我的Meteor客户端应用程序中运行用于快照测试的Jest测试用例。
安装软件包：
npm i --save-dev jest react-test-renderer
我只写了这样的东西：
import React from 'react';
import renderer from 'react-test-renderer';
import { expect } from 'meteor/practicalmeteor:chai';
import CoolComponent from '../some/where';
浏览 0提问于2017-07-14得票数 1
回答已采纳
1回答
堆栈导航器: ReferenceError:在Jest环境被拆除后，您正在尝试‘导入’一个文件
javascript、react-native、jestjs
我的代码非常简单。只需确保我的dev设置是正确的。
App.js
export default function App() {
return (
<NavigationContainer>
{/* <View style={styles.container}>
<Text>Hello Modules!</Text>
<StatusBar style="auto" />
</View> */}
<Stack.Navigat
浏览 10提问于2021-09-06得票数 0
回答已采纳
1回答
用于计算平均数据速度的反应组分的Jest /酶测试
unit-testing、react.js、jsx
我在试着掌握测试。从概念上讲，我很难确定应该测试什么。
这个Jest /酶测试对这个反应组分是否足够？
是不是太多了？
我是否应该实施更好的实践？
这里是我的组件.
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import {AverageText} from './index';
const Row = styled.div`
display: flex;
j
浏览 0提问于2018-04-23得票数 4
回答已采纳
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
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
