Question

我有一个基本功能：

部件/ FirstComponent：

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文档如何从组件中测试函数。

是否有一些简单的方法从组件导入函数并测试它？

修改现在使用＆＃39; react-test-renderer＆＃39;

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()然后再调用它。

Jest基础：从组件测试功能

1 个答案: