在导入酶后加载DomUtils模块时出现Webpack错误
我有一个带打字稿的项目,反应0.14. 和我用业力/摩卡/柴设置了Enviroment.及其工作.但是,当我从酶导入和使用函数时,我会在浏览器中出现错误(Chrome的人类可读错误): Uncaught TypeError: ext[key].bind is not a function 正如我所理解的模块227 ... 232(内部domutils文件)未加载之前. 也许我忘了什么?还是有人知道解决方法? 对不起,大量配置: webpack配置: var webpack = require("webpack"), path = require("path"), ExtractTextPlugin = require("extract-text-webpack-plugin"), precss = require('precss'), autoprefixer = require('autoprefixer');
4 2023-12-01
编程技术问答社区
使用jest的React测试不支持来自网页包别名的moduleNameMapper
我正在使用开玩笑和酶来测试我的反应组件.我还使用蓝图图标作为我的反应组件中的依赖性之一.作为我的WebPack配置的一部分,添加了以下内容: config.resolve.alias = { blueprintIcons: path.resolve('./node_modules/@blueprintjs/icons'), blueprint: path.resolve('./node_modules/@blueprintjs/core') }; 以下是Jest Config的一部分: rootDir: '.', roots: [ '/__test__/' ], transformIgnorePatterns: [ '/node_modules/' ], transform: { '^.+\\.jsx?$': 'babel-j
8 2023-12-01
编程技术问答社区
如何解决 "SyntaxError: 无效或意外的标记@import"?
我试图将开玩笑和酶添加到一个React WebPack项目中. 一切都在起作用,直到我将测试添加到组件,并带有样式表,导入Google字体. 我遇到的错误是: ● Test suite failed to run /Users/dev/Code/Git/react-redux-webpack/src/App.sass:1 ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed') ^ SyntaxError
2 2023-12-01
编程技术问答社区
使用绝对路径导入react组件
这是我的测试文件 // /imports/components/main.test.js import React from 'react' import { shallow, mount } from 'enzyme' import Main from './main' import TextInput from "/imports/ui/textInput" ... 和main.js具有 // /imports/components/main.js import { action1 } from "/imports/actions/myAction" ,但是当我运行测试时,它会引起错误,说 Cannot find module '/imports/actions/myAction' from 'main.js' 如果我评论import './main',导入textInput也会发生同样的事情.我在node_modules中导入模块没有问题. 我
2 2023-12-01
编程技术问答社区
在visual studio的package.json中出现了一个随机的Debug,我无法摆脱它。
我的软件包中出现了一个随机的调试声明. 我怎么能摆脱它? 解决方案 这看起来像是您的一个扩展名提供的代码镜头.您可以使用editor.codeLens设置禁用所有代码镜头,也可以找出执行此操作的扩展程序,并仅禁用扩展名或仅此镜头(如果提供设置). 其他解决方案 有一个特定功能可以更改此问题. 转到您的设置,搜索" Codelens",您将获得多个结果. 寻找" debug> javaScript> codelens:npm脚本",然后将其更改为Never.
0 2023-11-25
编程技术问答社区
Jest / Enzyme-如何在不同的视口进行测试?
我试图以某个视口宽度对组件进行测试.我正在做以下操作,但这似乎并没有改变: test('Component should do something at a certain viewport width.', () => { global.innerWidth = 2000; const component = mount(); // ... }); 我还找到了一篇文章,该文章解释了如何使用JSDOM进行操作,但是当Jest现在与JSDOM发行时,我想知道是否有一个本地解决方案. /dom-testing-react-application-jest-k4ll4f8sd 解决方案 背景信息: jsdom jsdom 为1024 x 768 可以通过手动设置窗口模拟窗口大小.Innerwidth和window.innerheight并触发resize event 这是一个示例: comp.
0 2023-11-19
编程技术问答社区
如何为useEffect反应钩中的url推送编写测试案例?
import { logout } from '../../actions/user.actions'; const Logout = () => { useEffect(() => { Router.push('/any'); }, []); }; 测试文件 afterEach(() => { jest.clearAllMocks(); }); afterAll(() => { jest.resetAllMocks(); // clear all the mocks. }); it('Should check the route', () => { const wrapper = mount(); expect(wrapper.find('LoadingMessage')).toB
6 2023-11-11
编程技术问答社区
Jest & Hooks : TypeError: 不能读取未定义的属性 'Symbol(Symbol.iterator)'。
在Create-React-App中,我正在尝试使用Jest进行简单测试,但我会遇到此错误:TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined. 我的组件AppBaruser.js 的一部分 /... const AppBarUser = () => { const classes = useStyles(); const [, formDispatch] = useContext(FormContext); const [t] = useContext(TranslationContext); const [openDrawer, setDrawer] = useState(false); const [userInfos, setData] = useState({}); useEffect(() => { c
18 2023-11-11
编程技术问答社区
酶和React路由器: 如何用useHistory浅层渲染一个组件
我一直在尝试使用shallow渲染组件,该组件由enzyme提供. 该组件使用useHistory来自react-router-dom. const baseMatch: match = { /* path, url, params */}; const location = createLocation(baseMatch.url); describe('MyComponent', () => { const baseProps = { history: createMemoryHistory(), location: createLocation(baseMatch.url), match: baseMatch }; beforeEach(() => { jest.mock('react-router-dom', () => ({ useHistory: jest.fn()
2 2023-11-11
编程技术问答社区
使用React Native和Hooks时,在Jest测试过程中状态没有更新
我正在尝试在组件中测试功能,基本想法是设置某个状态,当按下按钮时,请使用设置状态调用函数.代码有效,但是当我尝试测试时,我没有得到预期的结果,好像状态在测试期间永远不会设置. 我正在使用带Jest和酶测试的React本机应用中的钩子(USESTATE)的功能组件. 复制我的问题的一个示例是: import React, { useState } from "react"; import { View, Button } from "react-native"; import { shallow } from "enzyme"; const Example = function({ button2Press }) { const [name, setName] = useState(""); return ( setName("Hello")} />
2 2023-11-11
编程技术问答社区
如何使用JEST、Enzyme来测试React中的自定义钩子?
我有一个自定义挂钩,如下 const useSum = (a = 1, b = 1) => { const [sum, setSum] = useState(a + b); useEffect(() => { setSum(a + b); }, [a, b]); return sum; } 我在我的funcionat组件中使用了它 const MyFuncComp = () => { const sum = useSum(1, 2); return ( {sum} ); } 在测试案例中,我像这样 describe('Testing MyFuncComp', () => { const myFuncComp = mount(); it('should have value of sum', () => { const expected = '3';
4 2023-11-11
编程技术问答社区
在jest中模拟useDispatch,并在功能组件中使用该调度动作来测试参数。
嗨,我正在使用开玩笑和酶为功能组件编写测试.当我单击一个单击时,则会更改组件的参数(使用USESTATE的组件).当更改状态时,请使用效果调用并在使用效果时,我将在更改后用参数派遣一些异步动作.因此,我想用我派遣操作来测试参数.为此,我想模拟调度.我该如何实现? 任何人都可以帮助我,谢谢.下面我分享代码. component.js import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { useSelector, useDispatch } from 'react-redux'; import { useTranslation } from 'react-i18next'; import { clientOperations, clientSelectors } from '../../store/clients'; import Bread
4 2023-11-11
编程技术问答社区
使用 jest 模拟 react-router-dom 钩子无法正常工作
我正在使用酶的浅方法来测试使用useParams挂钩从URL参数获取ID的组件. 我正在尝试模拟useParams钩子,以使其不称为实际方法,但它不起作用.我仍然得到TypeError: Cannot read property 'match' of undefined,所以它称为实际useParams,而不是我的模拟. 我的组件: import React from 'react'; import { useParams } from 'react-router-dom'; export default () => { const { id } = useParams(); return {id}; }; 测试: import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import React from 'react'; im
6 2023-11-11
编程技术问答社区
如何通过改变useState来测试一个React Hooks组件?
我有一个我想用开玩笑/酶测试的React钩子功能组件.我想根据美国的价值来测试其三级渲染行为.我似乎找不到在线上的任何例子.没有"单击"来模拟 - 没有API调用以模拟,因为最后,我仍然需要根据美国的值进行测试. 过去,我可以设置班级组件.有了新的钩子,我不能. 因此,基本上 - 我如何模拟异步在模拟的提交函数中等待渲染的行为正确? 这是我的组件: import React, { useState } from 'react'; import { Redirect } from 'react-router-dom'; import Form from 'core/Form'; export const Parent = ({submitForm}) => { const [formValues, setFormValues] = useState({}); const [redirect, setRedirect] = useState(false); co
4 2023-11-11
编程技术问答社区
在用useState()钩子测试功能组件时设置状态
当我用酶测试类组件时,我可以做wrapper.setState({})以设置状态.当我使用useState()钩子测试功能组件时,我现在该怎么做? 例如,在我的组件中我有: const [mode, setMode] = useState("my value"); 我想在测试中更改mode 解决方案 使用钩中的状态时,您的测试必须忽略诸如状态之类的实现细节,以便正确测试它. 您仍然可以确保组件将正确的状态传递到其子女中. 您可以在此中找到一个很好的例子博客文章由肯特·C·多德斯(Kent C. Dodds)撰写. 这是带有代码示例的摘录. 依赖于状态实施详细信息的测试 - test('setOpenIndex sets the open index state properly', () => { const wrapper = mount() expect(wrapper.state
4 2023-11-11
编程技术问答社区
在React函数组件中嘲弄引用
我具有对其一个孩子的Ref组件.裁判是通过useRef创建的. 我想用浅渲染器测试组件.我必须以某种方式模拟参考文献来测试其余功能. 我似乎找不到任何方法来获取此参考并嘲笑它.我尝试过的东西 通过Childs属性访问它. React不喜欢这种情况,因为REF并不是真正的道具 嘲笑useref.我尝试了多种方法,只有在我使用的实施React.useRef> 时,才能使其与间谍一起使用 我看不到任何其他方法来嘲笑它.在这种情况下,我必须使用坐骑吗? 我无法发布实际情况,但是我已经构建了一个小例子 it('should test', () => { const mock = jest.fn(); const component = shallow(); // @ts-ignore component.find('button').invoke('onClick')(
6 2023-11-11
编程技术问答社区
用Jest测试带钩子的React功能组件
因此,我从基于类的组件转移到功能组件,但是在用开玩笑/酶编写测试时,我会陷入jest/酶的编写测试,以供明确使用钩子的功能组件中的方法.这是我的代码的删除版本. function validateEmail(email: string): boolean { return email.includes('@'); } const Login: React.FC = (props) => { const [isLoginDisabled, setIsLoginDisabled] = React.useState(true); const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); React.useLayoutEffect(() => { valid
10 2023-11-11
编程技术问答社区
测试使用挂钩获取数据的React组件
我的React-application具有一个组件,可以获取数据以从远程服务器显示.在预钩时代,componentDidMount()是去的地方.但是现在我想为此使用钩子. const App = () => { const [ state, setState ] = useState(0); useEffect(() => { fetchData().then(setState); }); return ( ... data display ... ); }; 使用开玩笑和酶的测试看起来像这样: import React from 'react'; import { mount } from 'enzyme'; import App from './App'; import { act } from 'react-test-renderer'; jest.mock('./api'); import { fet
8 2023-11-11
编程技术问答社区
如何在jest和enzyme中为useState Hook设置初始状态?
当前使用具有React钩的功能组件.但是我无法完全测试useState钩子.考虑一个场景,例如,在useEffect hook中,我正在执行API调用,并在useState中设置值.为了开玩笑/酶,我嘲笑数据进行测试,但我无法在jest中设置useState的初始状态值. const [state, setState] = useState([]); 我想将初始状态设置为开玩笑中的对象数组.我找不到任何类似于类组件的SetState函数. 解决方案 您可以模拟React.useState在测试中返回其他初始状态: // Cache original functionality const realUseState = React.useState // Stub the initial state const stubInitialState = ['stub data'] // Mock useState before rendering your com
8 2023-11-11
编程技术问答社区
为React表单编写一个Jest单元测试
我的表格如下: import React from 'react/lib/ReactWithAddons'; import { server } from '../data/server'; export const Report = React.createClass({ mixins: [React.addons.LinkedStateMixin], sendReport(event) { event.preventDefault(); var data = { ac: this.ab.checked, cp: this.cp.checked, nr: this.nr.checked, il: this.il.checked, message: this.message.value, n
2 2023-11-07
编程技术问答社区