React Jest测试与方法

8 浏览
0 Comments

React Jest测试与方法

我正在尝试为我React.Component类中定义的一个方法编写一个Jest测试。

class Math extends React.Component {
constructor(props) {
   super(props);
}
sum(a, b){
  return a+b; 
}
export default Math;

在我的Jest文件中，我正在做如下操作：

import { Math } from './Math'
 describe('Math', () => {
 it('应该正确相加', () => {
  const result = Math.sum(10, 10);
  expect(result).toEqual(20);
 }

但是它给我一个错误提示：

TypeError: 无法读取未定义的属性'sum'

我应该如何解决这个问题？我尝试在网上找到解决方案，但没有找到。

0

2 答案

0 Comments

问题的原因是你将Math.sum(x,y)作为静态函数而不是对象引用使用。

你可以将函数改为：

static sum(a, b){
  return a + b; 
}

对象引用要求你通过构造函数传递变量或通过函数动态分配它们。

let x, y;
class Math {
 //构造函数具有默认值为0的可选参数。
 constructor(first=0, second=0){
  this.x = first;
  this.y = second;
}
//使用通过构造函数传递的变量进行求和。
sum(){
 return x+y;
}
//设置x的值
changeX(num){ x = num; }
//返回x的值
getX(){ return x; }
//此函数事先保存到对象中，以便稍后检索。
sumSaved(first, second){
  this.x = first;
  this.y = second;
return x + y;
} 
//通过构造函数分配。
let foo = new Math(first:1,second:2);
foo.sum(); //返回3，因为1+2=3
foo.changeX(2);
foo.sum(); //返回4，因为2+2=4
//通过函数分配。
let bar = new Math();
bar.sumSaved(4,6); //返回10并覆盖变量。
bar.getX(); //返回4，因为你之前保存过。

关于静态函数的信息，请参见这里。

关于何时使用静态函数，请参见这里。

另外，关于默认导出的信息，请阅读这里。

好了，但是将来我打算在静态方法中添加这个实例，而在静态方法中无法访问this，因此一直在寻找更好的解决方法。

0
0 Comments

在使用React Jest进行测试时，出现了"React Jest test with method"的问题。问题的原因是在导入模块时，使用了命名导入方式，而实际上被导出的是一个默认导出。此外，问题还出在使用了类的方法sum，但是却将其当作类的静态方法来使用，而不是类的实例方法。

解决这个问题的方法是，将导入方式改为默认导入方式，或者将导出方式改为命名导出方式。同时，需要将类的方法sum改为实例方法，而不是静态方法。

代码示例：

// 导入模块时使用默认导入方式
import MyClass from './MyClass';
// 或者将导出方式改为命名导出方式
// import { MyClass } from './MyClass';
// 创建类的实例
const myInstance = new MyClass();
// 调用实例方法
myInstance.sum();

这样就可以正确地使用React Jest进行测试，并解决"React Jest test with method"的问题了。

0