codex-team / codex-team/editor.js

Unable to test component having editor.js with react-test-renderer

Open
#1,253 4 comments 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.