[Feature] Applying the editor #30
Conversation
saseungmin
commented
Nov 26, 2020
•
saseungmin
commented
- 글 작성 에디터 추가
- 리덕스로 상태 관리 하기
src/components/write/WriteEditor.jsx
Outdated
| <Editor | ||
| editorState={editorState} | ||
| onEditorStateChange={handleChangeEditor} | ||
| ariaLabel="contents" | ||
| placeholder="내용을 작성해주세요." | ||
| localization={{ | ||
| locale: 'ko', | ||
| }} | ||
| // 에디터 상단에 표시될 toolbar 설정 | ||
| toolbar={{ | ||
| list: { inDropdown: true }, | ||
| textAlign: { inDropdown: true }, | ||
| link: { inDropdown: true }, | ||
| history: { inDropdown: true }, | ||
| }} | ||
| /> |
There was a problem hiding this comment.
- draft-js 에디터를 기반으로 한 react-draft-wysiwyg 사용하였습니다.
- 열심히 찾아보았지만 이런 외부 에디터는 어떻게 테스팅을 해야할지 감이 안잡힙니다..
- coverage가 100% 만족할려면
handleChangeEditor함수를 호출해줘야 하는데 외부 라이브러리 에디터를 가져다 쓰니까 어떻게onChange를 해줘서 테스팅을 해야할지 잘 모르겠습니다. - 현재 작동은 되지만, 테스팅은 만족하지 못하는 상태입니다.
- 저 에디터의
onEditorStateChange를 통해서onChange가 호출되는데 이 에디터는div로 되어있어fireEvent.change가 아닌거 같습니다.
There was a problem hiding this comment.
mokcing을 하거나 useEvent를 사용하여 처리를 해야될 수도 있습니다. 라이브러리가 어떻게 구현되어 있는지 몰라서 저도 확인하고 답변드릴게요~
| setEditorState(state); | ||
| onChange({ |
There was a problem hiding this comment.
coverage만족못함..
| dispatch( | ||
| changeWriteField({ | ||
| name, | ||
| value, | ||
| }), | ||
| ); |
There was a problem hiding this comment.
- 여기도 만족하지 않음.
dispatch액션을 호출시켜줄려면 어떻게 해야할까요?
| moduleNameMapper: { | ||
| '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js', | ||
| '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js', | ||
| }, |
There was a problem hiding this comment.
- 컴포넌트 안에서 CSS파일을 불러와 import 시킬 때 테스트가 깨지게 됩니다..
그래서 jest 문서에 정적파일처리하는 내용이 있길래 문서와 같이 시도해봤지만, 해결되지 않았습니다. - 또한, 아니면
node_modules안에서 불러와서 그런가 생각해서 빼낸 후 다시 시도해보았지만, 역시 같은 이유로 테스트가 통과하지 못하였습니다. - 그래서
test가 관여하지 않는index.jsx에import를 시켜놓은 상태입니다.
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
There was a problem hiding this comment.
자바스크립트는 css 파일이나 image 파일들을 import할 수 없습니다. 그래서 webpack은 css-loader나 file-loader등을 사용해서 자바스크립트가 해당 리소스를 불러올 수 있도록 해줘야 합니다. 하지만 테스트 코드에서는 webpack으로 빌드한게 아니기 때문에 올바르게 동작하지 않습니다. 따라서 실제 코드에서는 동작하지만 테스트 코드에서는 필요없는 리소스들은 mocking해야 합니다.
jest.config.js에 다음과 같이 코드를 추가해서 리소스 파일을 불러올 때 마다 내가 지정한 가짜 코드를 불러오도록 할 수 있습니다.
module.exports = {
moduleNameMapper: {
'\\.(css|less)$': '<rootDir>/__mocks__/fileMock.js'
},
};<rootDir>/__mocks__/fileMock.js
module.exports = {};See also
There was a problem hiding this comment.
윤석님이 답해주신 해답을 어제도 문서를 보며 적용해보았지만 해결되지 않았습니다.
오늘 다시 해본 결과 잘 됩니다! 감사합니다. 🙏
아마 해결되지 않았던 이유는 test를 껐다가 재실행을 안해서 적용이 안되서 그런거 같습니다.
