我正在测试一个组件，其中 if ItemLength = 1，render返回null。
const { container, debug } = render(<MyComp ItemLength={1} />);
当我调用debug()我的测试时，它显示一个<div />. 如何检查组件在我的测试中是否返回一个空的 div？
我使用tslint VSCode扩展将TSLint添加到我的React/TypeScript项目中.我还根据TSLint文档全局安装了typescript和tslintnpm install -g tslint typescript
这是我的tslint.json文件:
{
"extends": ["tslint:latest", "tslint-react"],
"rules": {
// override tslint-react rules here
"jsx-wrap-multiline": false,
"max-line-length": false,
"no-implicit-dependencies": [true, "dev"],
"no-var-requires": false,
"indent": false
}
}
通过使用右侧按钮的网格定位。有人能指出我正确的方向吗？
.container {
width: 500px;
border: 1px solid red;
}
.grid {
display: grid;
grid-gap: 5px;
grid-auto-flow: column;
width: 100px;
}<div class="container">
<div class="grid">
<button>test 1</button>
<button>test 2</button>
</div>
</div>在上面的场景中，如何将两个按钮移动到父div的末尾？
我对Jest和一般测试都比较新.我有一个带有输入元素的组件:
import * as React from "react";
export interface inputProps{
placeholder: string;
className: string;
value: string;
onSearch: (depID: string) => void;
}
onSearch(event: any){
event.preventDefault();
//the actual onclick event is in another Component
this.props.onSearch(event.target.value.trim());
}
export class InputBox extends React.Component<inputProps, searchState> {
render() {
return (
<input
onChange={this.onSearch} //need to test this
className={this.props.className}
type="text"
value={this.props.value}
placeholder={this.props.placeholder} />
);
}
}
我想要一个测试来检查输入元素onChange是一个函数,它接受输入元素的value属性作为参数.这是到目前为止我已经走了多远:
//test to see the input element's onchange
//returns a function that takes its value as …因此，我下载了适用于Mac的NET Core 2.1 SDK并安装了它。但是，当我dotnet从终端运行命令时，会引发-bash: dotnet: command not found错误。
我正在尝试使用dotnet new react来启动一个新的.Net Core / React项目。
我怎样才能解决这个问题？谢谢！
我正在为项目使用第三方组件react-sparklines.但是,当我将它导入我的组件时,如下所示,它会抛出以下错误:未捕获TypeError:超级表达式必须为null或函数,而不是未定义.但当我把它拿出来时,错误消失了,应用程序运行顺利.
import React, {Component} from 'react';
import {connect} from 'react-redux';
import { Sparklines, SparklinesLine } from 'react-sparklines';
class WeatherList extends React.Component{
renderCity(cityData){
const name = cityData.city.name;
const temps = cityData.list.map(weather => weather.main.temp);
return (
<tr key={name}>
<td>{name}</td>
<td>
<Sparklines data={[5, 10, 5, 20]}>
<SparklinesLine color="blue" />
</Sparklines>
</td>
</tr>
);
}
}
function mapStateToProps(state){
return { weather: state.weather };}
export default connect(mapStateToProps)(WeatherList);
请注意我故意遗漏了这个render()功能.这是Sparklines的链接:https://github.com/borisyankov/react-sparklines
任何帮助将不胜感激!
我有以下枚举
export enum Sizes{
Small,
Large
}
在我的<Demo/>组件的props接口中正在使用：
export interface IProps{
Label?: string;
Size: SizeEnum;
}
我的问题是，何时使用此功能<Demo Size={how do i define size here?} />？
我在 Yup 中有这个架构，它在日期字段上设置了最小日期约束：
Yup.date()
.required(strings.RequiredField(strings.Invoice_Label_DueDate))
.min(new Date(), "Date cannot be in the past")
但是如果我选择当前日期，它仍然计算它是过去的。请注意，当我这样做时不会发生这种情况max(new Date(), ...)。在这种情况下，它包括所有过去的日期，包括当前日期。
编辑：这是问题的示例https://codesandbox.io/s/jznz5vl7lw
要限制 useEffect 在第一次渲染时运行，我们可以执行以下操作：
const isFirstRun = useRef(true);
useEffect (() => {
if (isFirstRun.current) {
isFirstRun.current = false;
return;
}
console.log("Effect was run");
});
根据这里的例子：https : //stackoverflow.com/a/53351556/3102993
但是如果我的组件有多个 useEffects，每个 useEffects 处理不同的 useState 变化怎么办？我试过isFirstRun.current在另一个 useEffect 中使用逻辑，但由于一个返回，另一个仍然在初始渲染上运行。
一些背景：
const Comp = () => {
const [ amount, setAmount ] = useState(props.Item ? Item.Val : 0);
const [ type, setType ] = useState(props.Item ? Item.Type : "Type1");
useEffect(() => {
props.OnAmountChange(amount);
}, [amount]);
useEffect(() => {
props.OnTypeChange(type);
}, [type]);
return { …我有一个组件，单击按钮时将更新的值通过 发送给父级props.OnValChange。这是在useEffect钩子中实现的。如果我通过控制台记录 useEffect，我可以看到它被调用。但在我的测试中，当我expect(prop.OnValChange).toHaveBeenCalledTimes(1);这样做时，它说它被调用了 0 次。
成分：
const MyComp = ({OnValChange}) => {
const [ val, setVal ] = useState(0);
useEffect(() => {
console.log("before");
OnValChange(val);
console.log("after");
}, [val]);
return (
<button onClick={() => setVal(val + 1)}>Count</button>
)
}
测试：
it("Sends val to parent when button is clicked", () => {
const prop = {
OnValChange: jest.fn();
}
const control = mount(<MyComp {...prop} />);
expect(prop.OnValChange).toHaveBeenCalledTimes(0);
control.find(button).simulate("click");
expect(prop.OnValChange).toHaveBeenCalledTimes(1);
})