时间戳

首页 > 解决方案 > 在 React 中测试简单的函数

javascript - 在 React 中测试简单的函数

问题描述

我正在构建一个简单的 React 应用程序并尝试测试一些在组件中执行某些逻辑的功能。我有柏树测试，但我现在正在尝试使用 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");
    });
});

我的测试是读取组件的道具，但得到：

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

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

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

标签： javascriptreactjsjestjs

解决方案

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

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

    });

});

推荐阅读