Em primeiro lugar…

Uma boa opção para lidar com arquivos SVG no Next.js é o @svgr/webpackplugin, esse plugin é muito fácil de implementar no seu projeto. Mas, quando você tenta implementá-lo no Storybook ou Jest, isso despacha um erro.

Erro enviado por Jest:

console.error
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `ForwardRef(LoadableComponent)`.
at useLoadableModule (/node_modules/next/shared/lib/loadable.js:131:5)

Mas… quando você tenta a solução de documentação do Next 12.3 ou superior, nada acontece.

Agora, vamos à solução!

Maneira de lidar com o problema

No seu jest.config.js, coloque o código escrito abaixo:

const nextJest = require("next/jest");

const createJestConfig = nextJest({
  dir: "./",
});

const customJestConfig = {
  moduleNameMapper: {
    "^.+\\.(svg)$": "<rootDir>/__mocks__/svg.jsx", // create a folder and file named __mocks__/svg.jsx in the root of your project
};

module.exports = createJestConfig(customJestConfig);

Zombando do arquivo SVG

E agora, você deve criar o svg.jsxcomponente para usar como mockup.

// __mocks__/svg.jsx

const SvgrMock = (props) => {
  return <svg {...props} />;
};

export default SvgrMock;

Obrigado por ler!

Inspirado por: