testing simple functions in React

Question

I am building a simple React app and trying to test some functions that perform some logic within the components. I have cypress tests but I'm now trying to use jest.

This particular function needs to return the most frequent string. The function currently works, and is like so...

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

and my test (not currently working) looks like this...

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

My test is reading the props of the component but gets:

cannot read property 'length' of undefined

I call .length on the array in the component.

Any suggestions on how I can test simple functions in components would be much appreciated!

Developenguin · Accepted Answer · 2019-09-27 16:58:07Z

1

Separately define the function inside your component file (but outside the component), export it and test it, without the need for a component to be instantiated inside the test case. Of course, you can use it inside the component as well.

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

Then in your test you can do

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

    });

});

edited Sep 27, 2019 at 16:58

answered Sep 25, 2019 at 18:06

Developenguin

1765 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Danny Heinrich Over a year ago

thanks very much. and in the test file what comes before favourite / what do i actually call that function on? would it be expect(this.favourite(items)).toBe etc. etc.?

Developenguin Over a year ago

No, since you import the function directly you can call it like you would any other import. I've updated my answer to give you a concrete example. Also, I completely missed that you did not assign items to a const, let or var in your original example. That can also be a reason why it doesn't work.

Danny Heinrich Over a year ago

thanks very much. i've just exported them and tested them for now. appreciate it :)

Collectives™ on Stack Overflow

testing simple functions in React

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related