Nested object validation with when not working properly.

When i’m trying to validate a nested object. within when, it is not validating the request properly.

const updateRecord = Yup.object().shape({
	title: Yup.string()
		.required()
		.label("Post title"),
	description: Yup.string()
		.required()
		.label("Post description"),
	is_update: Yup.boolean()
		.default(false)
		.required(),
	images: Yup.object().shape({
		logoImage: Yup.mixed().when("is_update", {
			is: true,
			then: Yup.mixed()
				.nullable()
				.test("fileFormat", "Only .png file allowed.", value => {
					if (!value) {
						return true;
					}
					return value && ["image/png"].includes(value.type);
				})
				.label("Logo image"),
			otherwise: Yup.mixed()
				.required()
				.test("fileFormat", "Only .png file allowed.", value => {
					if (!value) {
						return true;
					}
					return value && ["image/png"].includes(value.type);
				})
				.label("Logo image")
		}),
		backgroundImage: Yup.mixed().when("is_update", {
			is: true,
			then: Yup.mixed()
				.nullable()
				.test("fileFormat", "Only .png file allowed.", value => {
					if (!value) {
						return true;
					}
					return value && ["image/png"].includes(value.type);
				})
				.label("Background image"),
			otherwise: Yup.mixed()
				.required()
				.test("fileFormat", "Only .png file allowed.", value => {
					if (!value) {
						return true;
					}
					return value && ["image/png"].includes(value.type);
				})
				.label("Background image")
		})
	})
});

Here i’m validating form based on is_update key which can be either true or false. but I’m getting it undefined. i have tried to console using this.

is: value => {
	console.log(value);
	return true;
}

It is logging is_update as undefined.

[kentakozuka]

Those who encountered this issue, check from.

yup.string()
  .test('name', 'errorMessage', function(value) {
    const { from } = this;
    // 'from' will contain the ancestor tree. You can access like from[1], from[2].
})

[ShakinFire]

A workaround I found is to use Yup.mixed.test()

Example

Yup.object<any>().shape({
    name: Yup.string(),
    gender: Yup.boolean(),
    car: Yup.object<any>().shape({
        model: Yup.string(),
        horsePower: Yup.number(),
        color: Yup.mixed().test(
            'testName',
            'My error message',
            function (this: TestContext, fieldValue: any): boolean {
                const objectToValidate = this.options.context.data; // This is the whole object that comes to the validation
                /*
                    Looks like this
                    {
                        name: 'nameToValidate',
                        gender: true,
                        car: {
                            model: 'Ford',
                            horsePower: 225,
                            color: 'red',
                        }
                    }
                */

                // Now you can take the property you need
                // and continue by custom validating it and returning 'true'
                // when it passes or 'false' when it fails
            },
        ),
    }),
});

Also, good to note that instead of false you can return this.createError({ message: "YourCustomErrorMessage" }); if you have different failures in the test.