Jest 基础：从组件测试功能

Question

我有一个基本功能：

组件/第一个组件：

sayMyName = (fruit) => {
    alert("Hello, I'm " + fruit);
    return fruit;
}

当我尝试在FirstComponent.test.js 中使用 Jest对其进行测试时：

import FirstComponent from '../components/FirstComponent';

describe('<FirstComponent />', () => {
    it('tests the only function', () => {
        FirstComponent.sayMyName = jest.fn();
        const value = FirstComponent.sayMyName('orange');
        expect(value).toBe('orange');
    });
});

测试说：比较两种不同类型的值。预期的字符串，但收到未定义。

显然我没有导入函数来测试正确的方式？

我不够聪明，无法理解 Jest 文档如何从组件测试功能。

是否有一些简单的方法可以从组件中导入函数并对其进行测试？

编辑： 这现在使用“反应测试渲染器”

import FirstComponent from '../components/FirstComponent';
import renderer from 'react-test-renderer';

describe('<FirstComponent /> functions', () => {
        it('test the only function', () => {
            const wrapper = renderer.create(<FirstComponent />);
            const inst = wrapper.getInstance();
            expect(inst.sayMyName('orange')).toMatchSnapshot();
        });
})

Answer 1

您已使用不返回任何内容的函数对该函数进行了存根处理。FirstComponent.sayMyName = jest.fn();

要测试该功能，通常您可以这样做

// if static etc
import { sayMyName } from '../foo/bar';

describe('bar', () => {
  it('should do what I like', () => {
    expect(sayMyName('orange')).toMatchSnapshot();
  });
})

这将存储输出（“橙色”）并断言每次运行此测试时，它都应该返回橙色。如果您的函数停止执行此操作或返回其他内容，则快照将有所不同并且测试将失败。

直接比较.toBe('orange')仍然是可能的，但 jest 真正有用的是快照测试，因此您不需要重复逻辑和序列化/深度比较结构或 jsx。

如果是组件方法，则需要先渲染，getInstance()然后调用。