javascript - react enzyme 试验

Question

我的 react 组件有一个文件输入(上传)元素。当用户上传一个xlsx文件时，一个组件方法被调用，该方法读取xlsx文件并转换成JSON并放入redux表中。该方法是接受文件的“convertFileDataToJSON”对象并执行上述操作。

我需要测试这个方法。

我无法使用“new File("file://path/to/file")”。我收到以下错误

TypeError: FileConstructor is not a constructor (evaluating 'new File')

我正在使用“new Blob”创建一个 blob 对象并将其发送到实例方法到实例方法。

var myBlob = new Blob(["application_id,Statement " +
"Received Date,Statement Requested Date,"+
"1,10/10/70,10/10/70,10/10/70"+
"2,12/20/71,12/20/71,12/20/71"], {type : "text/plain"});
const json = component.instance().convertFileDataToJSON(myBlob);

如能提供有关如何测试此方法的任何帮助，我们将不胜感激。

Answer 1

好的，不是答案，但我建议您更改测试自己代码的方式。

强制测试 React Component 方法或多或少是一种反模式——一件坏事。原因很简单:组件将其公共(public) API 定义为 props，这是您应该测试的表面。

Note: while component instance methods are actually exposed to parent components that have a reference to them, it is considered a bad practice.

更好的方法是拥有一个可以单独测试的独立函数:

export function convertFileDataToJSON(file) {
  return // ...
}

然后您将(在 Jest 中)测试为:

import { convertFileDataToJSON } from '../utils/somewhere';

const blob = new Blob(
  [
    "application_id,Statement " +
    "Received Date,Statement Requested Date,"+
    "1,10/10/70,10/10/70,10/10/70"+
    "2,12/20/71,12/20/71,12/20/71"
  ],
  {type : "text/plain"}
);

describe('XLSX to JSON', () => {
  it('Works on simple CSV files', () => {
    const data = convertFileDataToJSON(blob);

    expect(data).toMatch( ...something );
  });
})