最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Jest basics: Testing function from component - Stack Overflow

programmeradmin1浏览0评论

I have a basic function:

ponents/FirstComponent:

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

When I try to test it with Jest inside FirstComponent.test.js:

import FirstComponent from '../ponents/FirstComponent';

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

Test says: Comparing two different types of values. Expected string but received undefined.

Apparently I'm not importing the function to test the right way?

I was not smart enough to understand the Jest documents how to test functions from ponents..

Is there some simple way to import function from ponent and test it?

Edit: This works now using the 'react-test-renderer'

import FirstComponent from '../ponents/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();
        });
})

I have a basic function:

ponents/FirstComponent:

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

When I try to test it with Jest inside FirstComponent.test.js:

import FirstComponent from '../ponents/FirstComponent';

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

Test says: Comparing two different types of values. Expected string but received undefined.

Apparently I'm not importing the function to test the right way?

I was not smart enough to understand the Jest documents how to test functions from ponents..

Is there some simple way to import function from ponent and test it?

Edit: This works now using the 'react-test-renderer'

import FirstComponent from '../ponents/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();
        });
})
Share Improve this question edited Aug 3, 2017 at 11:53 Jack M. asked Aug 3, 2017 at 10:54 Jack M.Jack M. 2,0315 gold badges26 silver badges36 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 6

You have stubbed the function with one that does not return anything. FirstComponent.sayMyName = jest.fn();

To test the function, typically you can just do

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

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

This will store the output ("orange") and assert that every time you run this test, it should return orange. If your function stops doing that or returns something else, snapshot will differ and test will fail.

the direct parison .toBe('orange') will still be possible but the really useful thing about jest is snapshot testing so you don't need to duplicate logic and serialise/deep pare structures or jsx.

if it's a ponent method, you need to render it first, getInstance() and then call it.

发布评论

评论列表(0)

  1. 暂无评论