I'm trying to test a function that takes another function as a parameter

Question

I am using chai to try and unit test a validation function I have found online. This validation function is being used inside of a 'react-final-form' component.

Here is where I got this validator function from:

https://youtu.be/OEg8jm-NbQ0?t=567

import chai, { expect } from "chai";
import chaiEnzyme from "chai-enzyme";

chai.use(chaiEnzyme());

const required = (value) => value === '' ? 'This is required.' : undefined;
const url = (value) => value && !(/^\/[a-z0-9]+$|[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi).test(value) ? 'This does not appear to be a link.': undefined;

const composeValidators = (...validators) => 
  (value) => 
    validators.reduce((error, validator) => error || validator(value), undefined);

let value = '';

describe("Forms", () => {
  describe("Final form", () => {
    describe("Utils", () => {
      it("Returns correct error message when form field value is empty and field is required", () => {
        expect(composeValidators(required)).to.equal('This is required.');
      });

      it("Returns correct error message when form field value is not empty and field should be a url", () => {
        value = 'not empty';
        expect(composeValidators(url)).to.equal('This does not appear to be a link.');
      });
    });
  });
});

Currently both assertions are returning [function] instead of the string value I am expecting and I'm not sure why. Any ideas on how to fix this test would be much appreciated.

Answer 1

I do love final form. It really helped drill home how to use currying functions. So, the example you grabbed from final form I've personally used with fields.

composeValidators(required)(value)

Currying is an odd concept that you can get by without needing it so don't fret over not understanding it at first glance.

Let's look at the signature:

const composeValidators = (...validators) => (value) =>

The first function takes X number of props or validation rules. You've got that part down. The second function, now, expects a value. You probably saw it used with Field's validate props. If you look at the documentation for FieldProps (see link below), you'll see it takes a function and passes it 3 arguments, value, allValues, and meta, not just value. This can help you write better validation rules that take into account more information about the field. Anyway, when final-form uses this, it takes the form of:

composeValidators(required)(value, allValues, meta)

I don't expect this to make sense right away but it should help you think about one specific use case of currying has some advanced options. Enjoy Final Form!

https://final-form.org/docs/react-final-form/types/FieldProps