Just encountered this issue today
To resolve the problem in your code, make sure to include @ckeditor in the list of elements not to be ignored. The full path, including node modules, is required rather than just a single string.
transformIgnorePatterns: ["node_modules\\/\\.pnpm\\/(?!(@ckeditor))"
By utilizing the above line, all node modules will be checked except for @ckeditor (you may also need to ignore additional packages like lodash, which could be used by @ckeditor)
Since we are no longer ignoring this module, instructions on how to compile them should be provided.
transform: { [`node_modules\\/\\.pnpm\\/${includePatterns}`]: 'babel-jest' }
Key points to note:
- The use of
\\ to escape the / is crucial
- If you are not using pnpm, remove the part
\\/\\.pnpm
- In the case of TypeScript usage, adding a transform for ts files may be necessary after updating the ignore configuration
const includePatterns = [
'@ckeditor',
'ckeditor',
'lodash',
'vanilla-colorful',
].join('|');
module.exports = {
setupFiles: ['<rootDir>/tests/lib/set-up.ts'],
testEnvironment: 'node',
transform: {
'^.+\\.(tsx?|ts)$': 'ts-jest',
[`node_modules\\/\\.pnpm\\/${includePatterns}`]: 'babel-jest',
},
transformIgnorePatterns: [
`node_modules\\/\\.pnpm\\/(?!(${includePatterns}))`,
],
moduleNameMapper: {
'.*\\.(css|png|svg)$': '<rootDir>/tests/lib/dummy.ts',
},
};
After following these steps, I managed to get it working. However, to properly test ClassicEditor, I had to utilize jsdom in order to simulate certain aspects (my tests were conducted in node mode).
global.window.ResizeObserver = jest.fn().mockImplementation(() => ({
observe: jest.fn(),
unobserve: jest.fn(),
disconnect: jest.fn(),
}));
global.document = jsdom.window.document;
global.HTMLElement = jsdom.window.HTMLElement;
global.HTMLTextAreaElement = jsdom.window.HTMLTextAreaElement;
global.MutationObserver = jsdom.window.MutationObserver;
global.DOMParser = jsdom.window.DOMParser;
global.Node = jsdom.window.Node;
The compilation and functionality are now successful, with ongoing progress towards data insertion and DOM manipulation.