使用@ testing-library/react测试材质ui滑块
您好，我正在尝试测试使用Material-UI创建的Slider组件，但是我无法将测试发送到谢谢. 组件 // @format // @flow import * as React from "react"; import styled from "styled-components"; import { Slider as MaterialUISlider }
..
react-testing-library相关内容
测试自定义钩子:不变违规:找不到react-redux上下文值；请确保组件包装在< Provider>
我有一个要测试的自定义钩子.它接收一个redux store调度函数并返回一个函数.为了获得结果，我正在尝试: const { result } = renderHook(() => { useSaveAuthenticationDataToStorages(useDispatch())}); 但是，我得到一个错误: 不变违规:找不到react-redux上下文值；请确保组件包装在
..
如何模拟反应自定义钩子返回的值?
这是我的自定义钩子: export function useClientRect() { const [scrollH, setScrollH] = useState(0); const [clientH, setClientH] = useState(0); const ref = useCallback(node => { if (node !==
..
如何模拟正在使用Jest测试的React组件中进行的API调用
我正在尝试模拟将数据检索到组件中的fetch(). 我'我将其用作模拟提取的模型，但我无法使其正常工作. 运行测试时出现此错误:babel-plugin-jest-hoist: The module factory of 'jest.mock()' is not allowed to reference any out-of-scope variables. 有没有办法让这些函数
..
无法找到带有文本的元素:"myText"；使用react-testing-library时出错
我正在尝试将react-testing-library与React和Jest一起使用，但是我的测试之一失败了，我认为这与测试文件上className prop上的正则表达式有关. 下面我附上了各自的测试&组件文件. 还可以使用此库进行snapshot测试吗?由于某种原因，我觉得我的考试还没有完成. // Image.js Component // @flow import *
..
如何使用Jest模拟新的React Router Hooks的history.push
我正在尝试在react-router上新的useHistory挂钩内模拟history.push并使用@testing-library/react.我只是像第一个答案一样嘲笑该模块:如何进行测试组件使用新的React Router钩子? 我正在这样做: //NotFound.js import * as React from 'react'; import { useHistory }
..
如何解决“警告:useLayoutEffect在服务器上不执行任何操作"?
在此显示完整错误: 警告:useLayoutEffect在服务器上不执行任何操作，因为它 效果无法编码为服务器渲染器的输出格式. 这将导致初始的非水化用户界面和 预期的用户界面.为避免这种情况，useLayoutEffect仅应在 专门呈现在客户端上的组件 in ForwardRef(ButtonBase) in WithStyles(ForwardRef(Bu
..
如何使用Jest和React测试库测试className
我对JavaScript测试完全陌生，并且正在使用新的代码库.我想编写一个在元素上检查className的测试.我正在使用Jest和 反应测试库 .下面，我有一个测试，该测试将基于variant道具呈现一个按钮.它还包含一个className，我想对其进行测试. it('Renders with a className equal to the variant', () => { c
..
使用react-testing-library测试组件是否使用正确的道具进行渲染
我有一些组件正在渲染另一个已经被隔离测试的组件(FetchNextPageButton)，例如: const News = () => (
News
... ) const Jobs = ()
..
您如何使用Jest和react-testing-library测试元素的不存在?
我有一个组件库，正在编写有关使用Jest和react-testing-library的单元测试.基于某些道具或事件，我想验证是否未渲染某些元素. 如果找不到元素，则 getByText，getByTestId等在react-testing-library中抛出并出错，导致在expect函数触发之前测试失败. 您如何使用react-testing-library来测试玩笑中不存在的东西?
..
我如何测试道具是否传递给孩子?
我的组件看起来像这样:(它具有更多的功能以及列，但是为了使示例更简单，我没有包括它) const WeatherReport: FunctionComponent = ({ cityWeatherCollection, loading, rerender }) => { /* some use effects skipped */ /* some event handl
..
如何在react-testing-library中的单选按钮上触发更改事件?
我正在转移到react-testing-library，并且不知道如何触发此事件并获取更改结果. 我尝试使用fireEvent函数触发更改，然后尝试使用rerender函数，但是我似乎无法使其正常工作. App.js import React, { useState } from "react"; import logo from "./logo.svg"; import "./
..
如何解决“更新未包装在act()中".在测试库反应中发出警告?
我正在使用一个具有副作用的简单组件.我的测试通过了，但出现警告Warning: An update to Hello inside a test was not wrapped in act(...).. 我也不知道waitForElement是否是编写此测试的最佳方法. 我的组件 export default function Hello() { const [posts,
..
如何在内部使用异步函数和setState测试useEffect
我已经建立了一个github项目，以了解如何更好地测试react(v 16.8.0) useEffect 挂钩. 我进行了api调用以获取 useEffect 中的数据，并将接收到的数据设置为状态组件元素. 我的组件将查询作为prop接收，如果查询prop字符串不为空，则进行api调用.我想用无空查询prop来测试是否进行了api调用，并且组件将其状态设置为正确. 我知道测试 useEffe
..
在React-Router的路由中进行基于路由的测试的推荐方法
我正在我的项目中使用react-testing-library，并试图编写可验证应用内路由的测试. 例如测试AccessDenied页面上的按钮是否会将您带回到主页. 我已经能够为我的App组件成功编写这些类型的测试，因为它定义了所有的App路由.但是，如果AccessDenied 是其中的一条路线，我该如何设置我的测试以验证单击的按钮将把我返回首页? 这是一个人为的例子:
..
如何将Jest模拟函数的范围限制为单个测试
我正在使用Jest + Testing-Library/React编写功能测试.经过数天的挠头，我发现当您使用.mockResolvedValue(...)或.mockResolvedValueOnce(...)时，模拟的范围不限于该测试... import React from "react"; import { render, waitForElement } from '@testin
..
如何使用react-testing-library测试react-select
App.js import React, { Component } from "react"; import Select from "react-select"; const SELECT_OPTIONS = ["FOO", "BAR"].map(e => { return { value: e, label: e }; }); class App extends Compone
..
酶，ReactTestUtils和反应测试库之间的区别
用于反应测试的酶，ReactTestUtils和react-testing-library之间有什么区别？ ReactTestUtils文档说： ReactTestUtils使您可以轻松地在您选择的测试 框架中测试React组件。 酶文档只是说： Enzyme是用于React的JavaScript测试实用程序，它使 更容易来声明，操纵和遍历React组件的输出。
..
如何模拟axios.create([config])函数以返回其实例方法，而不是用模拟覆盖它们?
我正在尝试模拟 axios.create()，因为我正在整个应用程序中使用其实例，显然需要其所有实现，该实现已被模拟破坏，因此无法获得结果正确的get，post方法. 这是代码在实际文件中的样子: export const axiosInstance = axios.create({ headers: { ...headers }
..
使用jest.mock('axios')时如何模拟拦截器?
使用笑话进行测试时，我具有基本的测试服语法: jest.mock('axios'); describe('app', () => { let render beforeEach(() => { axiosMock.get.mockResolvedValueOnce({ data: {greeting: 'hello there'},
..