Mocha

Configure Mocha to work properly with SVGR.

Steps

This steps describe how to configure mocha to handle SVG generated from SVGR. It only covers EcmaScript modules because it is the only type of output supported by SVGR.

1. Create a mock

Create a mock file __mocks__/svg.js:

export default 'SvgrURL'
export const ReactComponent = 'div'

The above mock would support the following import syntaxes:

import logoURL from '../assets/logo.svg'
// and
import { ReactComponent as Logo } from '../assets/logo.svg'

2. Create a custom loader

// mock-loader.js
import { cwd } from 'node:process'
import { pathToFileURL } from 'node:url'

const baseURL = pathToFileURL(`${cwd()}/`).href
const SVG_REGEX = /^[./a-zA-Z0-9$_-]+\.svg$/

export async function resolve(specifier, context, defaultResolve) {
  if (SVG_REGEX.test(specifier)) {
    return { url: new URL('./__mocks__/svg.js', baseURL).href }
  }
  return defaultResolve(specifier, context, defaultResolve)
}

3. Run mocha with the loader

mocha --loader=./mock-loader.js

Example

A full working example is available in SVGR repository.