我开始学习React,当我做一些测试时,我注意到两条警告信息:
警告:ReactTestUtils已移至react-dom/test-utils.更新引用以删除此警告.
警告:浅层渲染器已移至react-test-renderer/shallow.更新引用以删除此警告.
它们不会阻止测试运行也不会阻止正确验证,但始终存在此错误.
通过查看文档,我找到了这个页面,即使在我列出他们推荐的那些行之后,警告信息仍然显示出来.
我正在尝试一个非常简单的测试,这是我的代码:
import React from "react";
import toJson from "enzyme-to-json";
import { shallow } from "enzyme";
import { About } from "./About";
describe('Rendering test', () => {
const component = shallow(<About />);
const tree = toJson(component);
it('Should render the About component', () => {
expect(tree).toMatchSnapshot();
})
it('Should not contain an h2 element', () => {
expect( component.contains('h2') ).toBe(false);
})
})
为解决此警告,我需要做什么？我已将所有打包更新到最新版本.
使用React router v4开发React应用程序.一切顺利,直到我在我的应用程序中介绍了Redux.从那以后点击链接更改路由,浏览器URL会发生变化,但是路径对应的组件没有加载.如果我注释掉Redux代码,它会很好用.可能是什么导致了这个？这是我的路由代码:
import React, { Component } from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import LeftSubDefault from './../components/left-sub-default.component';
import LeftSubOne from './../components/left-sub-one.component';
import LeftSubTwo from './../components/left-sub-two.component';
import { withRouter } from 'react-router-dom';
import { connect } from "react-redux";
import { goToLeftDefault, goToLeftOne, goToLeftTwo } from "./../actions/leftRouteActions.js";
class LeftComponent extends Component {
render() {
return (
<div className="col-xs-6">
<p>
Current sub route: {this.props.currentRoute}
</p>
<ul>
<li onClick={this.props.goToDefault}><Link to={'/'}>Go To Default</Link></li>
<li onClick={this.props.goToSub1}><Link to={'/left-sub1'}>Go To One</Link></li>
<li onClick={this.props.goToSub2}><Link …reactjs react-router-component redux react-redux react-router-v4
当用户在浏览器选项卡中手动更改路径并按Enter键时,我遇到了问题.这会强制我的反应路由器导航到用户输入的状态.我想阻止这种情况,并且只允许通过我在网站上点击按钮实现的流程进行路由.
我的某些屏幕需要的数据仅在用户使用预期的流量导航网站时才可用.如果用户通过手动更改URL中的路径直接尝试导航到特定路线,那么他可能会跳过所需的流程,因此应用程序将中断.
其他情况,如果我想限制一些用户访问某些路由,但用户知道路径并在浏览器URL中手动输入,那么他将被呈现该屏幕,但不应该.
当用户在浏览器选项卡中手动更改路径并按Enter键时,我遇到了问题.这迫使我的ui-router/angular2-router导航到用户输入的状态.我想阻止这种情况,并且只允许通过我在网站上点击按钮实现的流程进行路由.
我们如何在Angular(版本2.x及更高版本)中获取DOM元素？addClass,removeClass等基本函数在打字稿中是不可用的,那么我们如何在角度组件中进行这些DOM操作呢？请建议是否有.TIA
是否有任何npm模块/ React-Helmet等其他方式允许我们在通过Angular应用程序时更改页面标题？
PS:我正在使用Angular 5.
我最近将 Jest 包从 v24 更新到了最新版本，并在运行单元测试时，我在测试套件运行结束时得到了以下信息：
A worker process has failed to exit gracefully and has been force exited.
This is likely caused by tests leaking due to improper teardown.
Try running with --runInBand --detectOpenHandles to find leaks.
我添加了--detectOpenHandles测试命令，并且消息将在下次运行中出现。我不确定如何看待它，因为 detectorOpenHandles 的目的是查找打开的句柄而不是修复它，所以下次运行时该消息如何不会出现，并且没有其他消息来指导我可能出现的问题。
有人遇到过类似的行为吗？补充一下，我现在使用的是最新版本的 Jest ie 27.2.0。
我需要axios在我的React应用程序中使用SOAP端点请求.因此,我需要在请求中传递xml数据并接收响应中的xml数据.
我已经使用了带有json数据的axios post但是如何在xml中使用相同的？PFB我使用的代码相同,但它不起作用.
JSON帖子请求:
var xmlData = <note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
var config = {
headers: {'Content-Type': 'text/xml'}
};
axios.post('/save', xmlData, config);
如果您对TIA有任何经验,请分享.
我今天用create-react-app创建了一个新项目.生产版本在IE11上运行不正常,控制台显示以下错误:
SCRIPT1010: Expected identifier
它指向我的main.js中的行:
{var n=e&&e.__esModule?function(){return e.default}:function(){return e};
错误发生在上面的e.(默认)之后.我的包json很简单:
{
"name": "sample-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
奇怪的是,我的开发服务器在IE11上完美运行所以问题只适用于生成版本.它也适用于Chrome.我需要填充吗？
polyfills internet-explorer-11 reactjs babeljs create-react-app
完整的错误消息:
不变违规:无法在"连接(投资组合)"的上下文或道具中找到"存储".将根组件包装在a中,或者将"store"显式传递为"Connect(Portfolio)"的prop.
我不确定为什么我在我的Jest测试中收到此错误,因为我的应用程序正在运行,我可以通过调度操作更改我的状态.
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, applyMiddleware, compose } from 'redux'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import reducer from './reducer'
import App from './App'
const element = document.getElementById('coinhover');
const store = createStore(reducer, compose(
applyMiddleware(thunk),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
));
ReactDOM.render(
<Provider store={ store }>
<App />
</Provider>, element);
import React from 'react'
import { connect } from 'react-redux'
import SocialMediaFooter from '../common/SocialMediaFooter'
import AssetsTable from '../assetsTable/AssetsTable' …reactjs ×7
angular ×3
react-redux ×3
angular5 ×2
jestjs ×2
redux ×2
axios ×1
babeljs ×1
enzyme ×1
polyfills ×1
post ×1
react-router ×1
soap ×1
typescript ×1
unit-testing ×1
xml ×1