Creo un archivo styleMock para eliminar los archivos de estilo css utilizados en los archivos JS.
jest.config.js :
module.exports = { preset: 'ts-jest/presets/js-with-ts', moduleNameMapper: { '\\.(css|less|scss)$': '<rootDir>/styleMock.js', } }; styleMock.js :
console.log('style mock'); module.exports = new Proxy( {}, { get: function getter(target, key) { console.log('key: ', key); if (key === '__esModule') { return false; } return key; }, } ); index.js :
import './index.css'; export function MyComponent() { return null; } index.css :
.my-component { background-color: #fff; } index.test.js :
import { MyComponent } from './'; describe('MyComponent', () => { test('should pass', () => { expect(MyComponent()).toBeNull(); }); }); Intento imprimir registros dentro del método getter . Pero cuando ejecuto el comando jest :
PASS issues/console-log-in-module-name-mapper-file/index.test.js (9.146 s) MyComponent ✓ should pass (1 ms) console.log style mock at Object.<anonymous> (styleMock.js:1:9) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 10.2 s Solo funciona el console.log utilizado en el alcance del módulo. ¿Por qué console.log en el método getter no imprime el registro?
Me lo imaginé. Porque no intenté acceder a la propiedad de estilo CSS obj. Deberíamos usar archivos .css como módulos CSS.
import s from './index.css'; export function MyComponent() { console.log(s.MyComponent); return null; } PASS issues/console-log-in-module-name-mapper-file/index.test.js (9.639 s) MyComponent ✓ should pass (3 ms) console.log style mock at Object.<anonymous> (styleMock.js:1:9) console.log key: __esModule at Object.getter [as get] (styleMock.js:7:15) console.log key: MyComponent at Object.getter [as get] (styleMock.js:7:15) console.log MyComponent at Object.MyComponent (issues/console-log-in-module-name-mapper-file/index.js:4:11) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 10.7 s Ran all test suites related to changed files.