在 React 中测试简单的函数

Question

我正在构建一个简单的 React 应用程序并尝试测试一些在组件中执行某些逻辑的功能。我有 cypress 测试，但我现在正在尝试使用 jest。

这个特定的函数需要返回最频繁的字符串。该功能目前有效，并且是这样的......

favourite(item) {
    return item.sort((a,b) =>
        item.filter(v => v===a).length
        - item.filter(v => v===b).length
    ).pop();
}

我的测试（目前不工作）看起来像这样......

import React from "react";
import { create } from "react-test-renderer";
import ShoppingCart from "../components/ShoppingCart";

describe("most frequent shopping item", () => {
    test("returns the most frequent string in an array", () => {
        const component = create(<ShoppingCart />);
        const instance = component.getInstance();
        items = ["eggs", "jam", "jam", "milk", "bread" ]
        expect(instance.favourite(items)).toBe("jam");
    });
});

我的测试是读取组件的 props 但得到：

无法读取未定义的属性“长度”

我在组件中的数组上调用.length。

任何关于如何在组件中测试简单函数的建议都将不胜感激！

Answer 1

在你的组件文件内（但在组件外）单独定义函数，导出并测试它，而不需要在测试用例中实例化组件。当然，你也可以在组件内部使用它。

export const favourite = function(item){
    return item.sort((a,b) =>
    item.filter(v => v===a).length
    - item.filter(v => v===b).length
    ).pop();
}

那么在你的测试中你可以做

import { favourite } from 'path/to/file';

describe('favourite', () => {

    it('should return the item that occurs most frequently', () => {

        const items = ["eggs", "jam", "jam", "milk", "bread" ]
        expect(favourite(items)).toBe("jam");

    });

});