[question] I'm unable to extend expect with custom matchers.

[CHE1RON]

Describe the bug

I'm unable to extend expect with custom matchers.

To Reproduce

// .storybook/test-runner.ts

'use strict'

import { expect } from '@storybook/jest';

module.exports = {
  setup() {
    expect.extend({
      toBeMuiChecked(element) {
        // Determine whether class indicates 'checked' state
        const pass = element.toHaveClass('Mui-checked');

        return {
          pass,
          message: pass
            ? () => 'you shall pass'
            : () => 'you shall not pass'
        }
      }
    });
  },
};

Expected behavior

Test succeeds.

Screenshots

System

$ npx storybook@latest info

Environment Info:

  System:
    OS: macOS 13.3
    CPU: (8) arm64 Apple M2
  Binaries:
    Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Edge: 114.0.1823.55
    Safari: 16.4
  npmPackages:
    @storybook/addon-a11y: ^7.0.27 => 7.0.27
    @storybook/addon-coverage: ^0.0.8 => 0.0.8
    @storybook/addon-essentials: ^7.0.27 => 7.0.27
    @storybook/addon-interactions: ^7.0.27 => 7.0.27
    @storybook/addon-links: ^7.0.27 => 7.0.27
    @storybook/addon-viewport: ^7.0.27 => 7.0.27
    @storybook/blocks: ^7.0.27 => 7.0.27
    @storybook/jest: ^0.1.0 => 0.1.0
    @storybook/node-logger: ^7.0.27 => 7.0.27
    @storybook/preset-create-react-app: ^7.0.27 => 7.0.27
    @storybook/react: ^7.0.27 => 7.0.27
    @storybook/react-webpack5: ^7.0.27 => 7.0.27
    @storybook/test-runner: ^0.11.0 => 0.11.0
    @storybook/testing-library: ^0.2.0 => 0.2.0

[yannbf]

Hey there @CHE1RON, thanks for opening this issue!

I believe you understood the test-runner a bit wrong. The test-runner observes your Storybook. It does not augment its functionality. If you want to extend the matchers used in your play function, you should do it in Storybook, and not the test-runner configuration. You use the test-runner configuration to extend expect when using it for accessibility testing, for instance, in Node.

You should be able to achieve this by using a similar code, but in your .storybook/preview file instead:

// .storybook/preview.ts
import { expect } from '@storybook/jest';

expect.extend({
      toBeMuiChecked(element) {
        // Determine whether class indicates 'checked' state
        const pass = element.toHaveClass('Mui-checked');

        return {
          pass,
          message: pass
            ? () => 'you shall pass'
            : () => 'you shall not pass'
        }
      }
    });

[CHE1RON]

Hey Yann, thanks for letting me know & keep up the good work!