How zod-fixture can help with your test setups

Modified September 07, 2022

Tim Deschryver

timdeschryver.dev

Define a model with zod link

 customer.model.ts content_paste
import { z } from 'zod';
 
export const CustomerSchema = z.object({
  id: z.number(),
  name: z.string(),
  birthday: z.date(),
  address: z.object({
   street: z.string(),
   city: z.string(),
   state: z.string(),
  }),
  pets: z.array(z.object({ name: z.string(), breed: z.string() })),
  totalVisits: z.number(),
});
 
export type Customer = z.infer<typeof CustomerSchema>;

Use the zod schema with createFixture to generate test fixtures link

 content_paste
import { render, screen } from '@testing-library/angular';
import { of } from 'rxjs';
import { z } from 'zod';
import { createFixture } from 'zod-fixture';
import { AppComponent } from './app.component';
import { AppService } from './app.service';
import { CustomerSchema } from './customer.model';
 
describe(AppComponent.name, () => {
   it('renders a collection of customers', async () => {
     const customers = createFixture(z.array(CustomerSchema));
     await render(AppComponent, {
       providers: [
         {
           provide: AppService,
           useValue: {
             getCustomers: () => of(customers),
           },
         },
       ],
     });
 
     expect(await screen.findByText(customers[0].name, { exact: false })).toBeTruthy();
     expect(await screen.findByText(customers[1].name, { exact: false })).toBeTruthy();
   });
});

Feel free to update this blog post on GitHub, thanks in advance!

Support me

I appreciate it if you would support me if have you enjoyed this post and found it useful, thank you in advance.

Share this post