正在测试通过了值的组件方法的返回值

Question

嗨，我正在尝试对一个以数字传递并返回字符串的组件方法进行测试。这是我第一次在react中进行写作测试，我找不到任何在我的情况下该怎么做的例子。

我的代码

import moment from "moment";
import React from 'react';
class ReactPage extends React.Component {
//some other functions
//turn number into money (returns string)
commafyMoney = (money) => {
return "$"+ money.toFixed(2).replace(/d(?=(d{3})+.)/g, '$&,');
}
//return fancy react webpage
render(){
return(
//stuff
);
}
}
export default ReactPage; 

这是我测试返回值的尝试

import {shallow, mount, render, configure} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import ReactDOM from 'react-dom';
import ReactPage from './App';
it('commafyMoney(number)', () => {
const wrapper = shallow(<ReactPage />);
expect(wrapper.instance().commafyMoney(1234.56)).toEqual("$1,234.56");
});

有人知道我该如何修复这个测试以使其正常工作吗？

Answer 1

选项1：wrapper.instance((

你错过了一些建立酶所需的华夫饼。

import React from 'react'; // React must be in scope any time you write jsx.
configure({ adapter: new Adapter() }); // Let enzyme use the adapter.

在导入后添加这些行，测试就会通过。(假设jest配置正确。(

选项2：不渲染组件

由于您正在测试的方法不会直接影响组件的渲染，因此您可以只获取组件的实例而不进行渲染。

import ReactPage from './App';
it('commafyMoney(number)', () => {
const page = new ReactPage;
expect(page.commafyMoney(1234.56)).toEqual("$1,234.56");
});

这就提出了一个问题，为什么该方法是在类中定义的，而不是从其他地方导入的实用函数。您最好将该方法移到另一个更容易测试的模块。