Unit testing Slices

Developing with Prismic
1

Hi there,
I'm trying to render a test slice, specifically for testing of slice items with TypeScript. I'm using testing-library with vitest (in a nextjs project). Here's my test code:

const testSlice: SlideSlice = {
  items: testItems,
  primary: {} as Record<string, never>,
  slice_type: 'slide',
  variation: 'default',
  version: '',
  slice_label: null,
  
};

   it('should have an initial filtered list', async () => {
    render(<Slide index={0} slice={testSlice} slices={[]} context={undefined} />);

    expect(screen.getByText('foo')).toBeInTheDocument();
    expect(screen.getByText('bar')).not.toBeInTheDocument();
  });

The unhelpful error message from vite/testing-library:

Error: Parse failure: Unexpected token (25:11)
Contents of line 25: render(<Slide index={0} slice={testSlice} slices={} context={void 0} />);
❯ ssrTransformScript node_modules/vite/dist/node/chunks/dep-2285ba4f.js:52653:15
❯ ssrTransform node_modules/vite/dist/node/chunks/dep-2285ba4f.js:52628:12
❯ Object.ssrTransform node_modules/vite/dist/node/chunks/dep-2285ba4f.js:61909:20
❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-2285ba4f.js:40405:24

I have no typescript errors, I've tried debugging but it appears to fail before it hits the first line of my test. Any suggestions?

2

Hi @shaun.gaisie,

The error appears to be unrelated to Slices and Prismic. It looks like Vitest is not able to parse your test file.

25:11 appears to be the start of your JSX (<Slide ...), which could signal any of the following issues:

  • Your test is saved as a .ts file. Ensure the extension is .tsx.
  • Vitest is not configured to use the React plugin. Ensure @vitejs/plugin-react is installed and configured in your vite.config.ts or vitest.config.ts file. See this README for more details.

Could you try both of those fixes?