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.

在导入后添加这些行，然后测试将通过。（假设玩笑配置正确。）

选项2：不渲染组件。

由于您要测试的方法不会直接影响组件的呈现，因此您只需获取组件实例即可，而无需呈现。

import ReactPage from './App';

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

这引起了一个问题，为什么在类中定义方法而不是从其他地方导入的实用函数。您最好将方法移至易于测试的另一个模块。

通过传递的值测试组件方法的返回值

1 个答案:

选项1：wrapper.instance（）

选项2：不渲染组件。