CODEWITHSUNDEEP
reactjstypescriptunit-testingjestjsenzyme
user10104341
user10104341

Reputation:

Jest - Map through an Array of Items and test their Values

I have a simple Utility Function. It takes an Enum, and Transform's it to an Array of Objects shaped as {label: string, value:string}.

Here is the Function as well as the Interface it uses:

export interface ISelectOption {
  value: string;
  label: string;
  selected?: boolean;
}

const transformEnumToISelectArray = (object: object): ISelectOption[] =>
  Object.keys(object).map(value => ({
    label: value,
    value
  }));

export default transformEnumToISelectArray;

I have a repetitive Test. Basically, I check if the output of label/value, is what is expected, if I provide a Enum. Here is the test, that it is currently working:

import transformEnumToISelectArray from '../transformEnumToISelectArray';
import ISelectOption from '../../interfaces/ISelectOption';

describe('transformEnumToISelectArray', () => {
  enum mockEnum {
    FIELD1 = 'FIELD1',
    FIELD2 = 'FIELD2',
    FIELD3 = 'FIELD3'
  }

  let expectedResult: ISelectOption[] = [];
  let nonExpectedResult: ISelectOption[] = [];

  describe('ExpectedResults', () => {
    beforeEach(() => {
      expectedResult = [
        {
          label: 'FIELD1',
          value: 'FIELD1'
        },
        {
          label: 'FIELD2',
          value: 'FIELD2'
        },
        {
          label: 'FIELD3',
          value: 'FIELD3'
        }
      ];
    });
    it('should return an Array of ISelectOption shaped Object with correct `label` and `value`', () => {
      const response = transformEnumToISelectArray(mockEnum);
      expect(response[0].label).toEqual(expectedResult[0].label);
      expect(response[1].label).toEqual(expectedResult[1].label);
      expect(response[2].label).toEqual(expectedResult[2].label);
      expect(response[0].value).toEqual(expectedResult[0].value);
      expect(response[1].value).toEqual(expectedResult[1].value);
      expect(response[2].value).toEqual(expectedResult[2].value);
    });
  });
});

Please ignore the beforeEach(), I have more tests, but I ommited them. My problem and this is just an optimization here, is that I want to make it better. So, I though I would map through the Array of response and expectedResult using Enzymes's .map(fn) => Array<Any>.

This is what I did:

expect(response.map(index => response[index].lable)).toEqual(
        expectedResult.map(index => expectedResult[index].label)
      );

But I get the following:

Type 'ISelectOption' cannot be used as an index type.ts(2538)

Does anyone understand this. Do I need to spacifiy an index Property on my ISelectOption interface for this to work? Any Ideas?

Upvotes: 2

Views: 21414

Answers (1)

R10t--
R10t--

Reputation: 829

response.map() does not send the index as the parameter to the function, it sends the value of the array element, in your case this is an ISelectOption instance. In your code, the index is actually your object. Changing it to this should work:

expect(response.map(obj => obj.label)).toEqual(
        expectedResult.map(obj => obj.label)
      );

Upvotes: 3

Related Questions