The svg in nextjs was not handled as a react component, it was not possible to change dynamically the color of the svg by example. We add the @svgr/webpack, it will handle the svg as react component. We keep as well the way next.js handle the svg, so we can use both ways. To handle the svg in the next way we need to add the `?url` at the end of the svg import.
31 lines
716 B
TypeScript
31 lines
716 B
TypeScript
import type { Config } from 'jest';
|
|
import nextJest from 'next/jest.js';
|
|
|
|
const createJestConfig = nextJest({
|
|
dir: './',
|
|
});
|
|
|
|
// Add any custom config to be passed to Jest
|
|
const config: Config = {
|
|
coverageProvider: 'v8',
|
|
moduleNameMapper: {
|
|
'^@/(.*)$': '<rootDir>/src/$1',
|
|
},
|
|
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
|
|
testEnvironment: 'jsdom',
|
|
};
|
|
|
|
const jestConfig = async () => {
|
|
const nextJestConfig = await createJestConfig(config)();
|
|
return {
|
|
...nextJestConfig,
|
|
moduleNameMapper: {
|
|
'\\.svg$': '<rootDir>/jest/mocks/svg.js',
|
|
'^.+\\.svg\\?url$': `<rootDir>/jest/mocks/fileMock.js`,
|
|
...nextJestConfig.moduleNameMapper,
|
|
},
|
|
};
|
|
};
|
|
|
|
export default jestConfig;
|