reactjs - 使用传递的值测试组件方法的返回值

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()

您缺少设置 enzyme 所需的一些华夫饼。

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");
});

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