codex-team / codex-team/editor.js
Unable to test component having editor.js with react-test-renderer
- Dominant language
- TypeScript
- Stars
- 31.9k
- Forks
- 2.2k
- Avg merge
- 1d 1h
- Merged PRs (30d)
- 1
Description
How to test the components that have the `EditorJs` component (imported from '@editorjs/editorjs') as a child.
I am getting the following error while running the tests:
`Editor.js is not ready because of Error: element with ID «editorjs» is missing. Pass correct holder's ID.`
Custom Editor Component: CustomEditor.js
```
import React from 'react';
import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import List from '@editorjs/list';
import Paragraph from '@editorjs/paragraph';
import Quote from '@editorjs/quote';
import Table from '@editorjs/table';
import UppyUploader from './uppy.js';
import { useSelector } from 'react-redux';
function Editor({value, onChange}) {
const editor_block = React.useRef(null);
const space_slug = 'slug'
React.useEffect(() => {
new EditorJS({
holder: editor_block.current,
tools: {
header: Header,
list: List,
paragraph: Paragraph,
quote: Quote,
table: Table,
uppy: {
class: UppyUploader,
config: {
space_slug: space_slug,
},
},
},
onChange: (value) =>
value.saver.save().then((value) => {
console.log(value);
onChange(value);
}),
data: value,
});
}, []);
return
;}
```
Component: Component.js
```
import React from 'react';
import { Form, Input } from 'antd';
import EditorJS from './CustomEditor;
const Component = () => {
return (
);
}
```
Test code is as follows: Component.test.js
```
import renderer, { act } from 'react-test-renderer';
import Component from './Component'
describe('snapshot testing', () => {
it('should render the component', () => {
let component;
act(() => {
component = renderer.create(
,
);
});
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
});
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.