search

scniro / react-codemirror2

Codemirror integrated components for React
MIT License
1.65k stars 192 forks source link

Update README on how to test beautified JSON and RTL #281

Closed mikedidomizio closed 2 years ago

mikedidomizio commented 2 years ago

Adding a snippet to the README on how to test beautified JSON with react-codemirror2 and react-testing-library. My initial thought was to add an RTL test to verify it works but didn't want to have another test suite along with Enzyme.

When using beautified JSON with line breaks like in the README snippet, it'll render like this with RTL and no stub. As you can see, it just has the } but it also doesn't visually display anything. codemirror does some magic with how it renders the height/width and whether it should add/remove line items. With jsdom, it would return offsetWidth of "", and consider the editor hidden. The problem I had was that it was very confusing understanding where the problem was and the codemirror code base is hard to understand what is happening underneath the hood.

The goal of this PR is to hopefully save someone some time by not having to dig through the codemirror code like I did and make react-codemirror2 testable with RTL.

This is a result of the stub that I've added. It renders visually like it would appear to the user ✅.

I've pushed up another branch to my fork that has a test verifying it is working as intended. Run test with

npx jest --testNamePattern=^will render JSON beautified with react-testing-library$ --runTestsByPath ./test/index.spec.tsx
mikedidomizio commented 2 years ago

I've realized there is an still an underlying issue that even adding this documentation won't help. codemirror2 is all smoke and mirrors when it comes to editing an actual text input and therefore RTL has no way to mimic actual updates to the code editor.