Support running tests in Jest #225
Comments
|
I was able to run a single test case using I decided to substitute the My configuration in {
"jest":{
"roots":[
"<rootDir>/src"
],
"collectCoverageFrom":[
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles":[
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv":[
"<rootDir>/src/setupTests.js"
],
"testMatch":[
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment":"jest-environment-jsdom-fourteen",
"transform":{
"^.+\\.(js|jsx|ts|tsx)$":"<rootDir>/node_modules/babel-jest",
"^.+\\.(svg)$":"<rootDir>/node_modules/jest-raw-loader",
"^.+\\.css$":"<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)":"<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns":[
"\\\\/node_modules\\\\/(?!@ckeditor).+\\.(js|jsx|ts|tsx|svg)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"modulePaths":[],
"moduleNameMapper":{
"^react-native$":"react-native-web",
"^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy",
"classiceditor":"<rootDir>/node_modules/@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor"
},
"moduleFileExtensions":[
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins":[
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
]
}
}The import React, { Component } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
const editorConfiguration = {
plugins: [
Essentials,
Bold,
Italic,
Paragraph
],
toolbar: [ 'bold', 'italic' ]
};
class App extends Component {
render() {
return (
<div className="App">
<h2>Using CKEditor 5 from source in React</h2>
<div className="ckeditor-component" data-ckeditor-class-name={ ClassicEditor.name }>
<CKEditor
editor={ ClassicEditor }
config={ editorConfiguration }
data="<p>Hello from CKEditor 5!</p>"
/>
</div>
</div>
);
}
}
export default App;And a test that is saved into two files: import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
test( 'renders the <CKEditor> component', () => {
const { container } = render( <App/> );
const editorWrapper = container.querySelector( '.ckeditor-component' );
expect( editorWrapper ).toBeInTheDocument();
expect( editorWrapper.getAttribute( 'data-ckeditor-class-name' ) ).toEqual( 'VirtualTestEditor' );
} );I am using two of the same files in order to check whether the My results:
We should start thinking about publishing our dev-utils. Edit: My project followed the Integrating CKEditor 5 built from source section in the React component guide. |
|
@pomek is there any chance you could share a minimal complete example of the test setup you have, perhaps in a separate repo? As far as I can tell my code is doing more or less the same things you're doing here but I'm still getting the 'duplicate modules' error (#219) so I'm curious what the difference is between my setup and yours. |
|
@aliceriot, I published my example application here – https://github.com/pomek/react-ckeditor5-eject. In the README you will find everything that would help to execute the test. |
|
I installed this |
martynawierzbicka
added
the
support:2
|
If anyone has a recent example of the latest Jest + latest CKEditor + and TypeScript, it'd be appreciated. |
|
My ck-editor version is 35.x I'm trying update to last version to get last improviments, but my app do not run tests anymore using jest. I have been recived the following css erros:
This is not my oficial app, is is a boilerplate created to try jest works, but a have the same issue in; this happens from version 40.0.0 |
|
Yes please, we are trying to integrate CKEditor5 into a project that uses Jest heavily. We could use some guidance. Is it even supported? @pomek 's example from 2021 is a 404 now :) |
and others
Problem
Jest is the default test runner used by many React apps. Unfortunately, Jest does not use a real browser – instead, it runs tests in Node.js with the use of JSDOM. JSDOM is not a complete DOM implementation and while it's apparently sufficient for standard apps, it's not able to polyfill all the DOM APIs that CKEditor 5 requires. Thus, even if someone solves compilation issues, then running CKEditor 5 tests for real in Jest will not work.
Example error:
Solution(s)
I don't think there's a solution for running all kind of CKEditor 5 tests in Jest. However, there are a couple things that could be done:
What else?
If you'd like to have this issue resolved please react with 👍 to this ticket.
The text was updated successfully, but these errors were encountered: