Vitest setup for testLayer

[idoaignostics]

Hi,

I wrote a custom layer using CompositeLayer. I would like to test it via the testLayer utility via Vitest.

However, the documentation doesn't really mention much about how to set it up. Can testLayer run in jsdom, or does it have to run in the browser via Vitest Browser Mode? What would be the instructions for the correct setup, whether using the former or the latter?

If I attempt to run in jsdom, I see this error: Error: Cannot find package 'puppeteer' imported from /Users/Username/WebstormProjects/my-project/node_modules/@probe.gl/test-utils/dist/browser-automation/browser-driver.js. Therefore, does it mean installing Puppeteer is a pre-requisite even though I don't use it in the tests?

I also see the following error when running in jsdom: Failed to created device: canvas.getContext is not a function. Trying to use vitest-canvas-mock or directly mocking canvas.getContext didn't help. How can this issue be solved? I tried copying the setup from https://github.com/visgl/deck.gl/blob/master/test/setup/vitest-node-setup.ts but it didn't help.

I tried to run the test in Vitest Browser Mode by copying the setup from https://github.com/visgl/deck.gl/blob/master/test/setup/vitest-browser-setup.ts, but then I get a whole plethora of errors:

stderr | unknown test
Module "util" has been externalized for browser compatibility. Cannot access "util.inherits" in client code. See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
stderr | unknown test
luma.gl: Error: Failed to request WebGPU adapter
 ❯  browser (chromium)  src/layers/my-layer/MyLayer.browser.spec.ts (0 test)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL   browser (chromium)  src/layers/my-layer/MyLayer.browser.spec.ts [ src/layers/my-layer/MyLayer.browser.spec.ts ]
Error: Failed to import test file /Users/Username/WebstormProjects/my-project/src/layers/my-layer/MyLayer.browser.spec.ts
Caused by: TypeError: util.inherits is not a function
 ❯ node_modules/.vite/vitest/ef98362b8a6b0c8cd804b0d227aa1ffeaba89786/deps/@deck__gl_test-utils.js?v=a50f1029:796:6
 ❯ node_modules/.vite/vitest/ef98362b8a6b0c8cd804b0d227aa1ffeaba89786/deps/@deck__gl_test-utils.js?v=a50f1029:1630:19
 ❯ node_modules/.vite/vitest/ef98362b8a6b0c8cd804b0d227aa1ffeaba89786/deps/@deck__gl_test-utils.js?v=a50f1029:3723:14
 ❯ node_modules/.vite/vitest/ef98362b8a6b0c8cd804b0d227aa1ffeaba89786/deps/@deck__gl_test-utils.js?v=a50f1029:3908:0

Any help would be greatly appreciated.

[idoaignostics]

FYI, the test I'm trying to run is pretty simple and just checks that a certain prop is set in the state, e.g.:

describe('MyLayer', () => {
  it('deck.gl layer conformance tests', () => {
    testLayer({
      Layer: MyLayer,
      testCases: [
        {
          title: 'Default Props',
          props: defaultProps,
          onAfterUpdate({ layer }) {
            expect(layer.state.someProp).toBeDefined();
          },
        },
      ],
    });
  });
});

[amarant]

There is 2 ways,
testing layers props in JSDom with deck.gl >=9.3 using Vitest :

import { testLayer } from '@deck.gl/test-utils/vitest';

exemple here

testing the layer rendered WebGL image in Vitest Browser test with Playright using a custom harness exemple here and browser-render code here

[idoaignostics]

Thanks very much for the response! It might be helpful to update the documentation to include Vitest setup + examples and testing the rendered layer.

[chrisgervang]

Thanks for the question @idoaignostics , and for answering this @amarant! Just confirming that this is the recommended way to test custom deck layers. We transitioned all of our tests in 9.3 to vitest, and for backwards compatibility we decided to not touch the old imports.

I'll push up a PR with updated documentation. Let me know if you run into any issues.

[chrisgervang]

#10345