menu

Testing Library

Simple and complete DOM testing utilities that encourage good testing practices.

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# General Help
view-forward
# Angular Help
view-forward
# Cypress Help
view-forward
# DOM Help
view-forward
# React Help
view-forward
# TestCafe Help
view-forward
# Vue Help
view-forward
Team

Has anyone successfully used RTL to test change events on a draftJS text box?

April 12, 2019 at 6:12am

Has anyone successfully used RTL to test change events on a draftJS text box?

April 12, 2019 at 6:12am (Edited 12 months ago)
The fireEvent.change() just doesn't work.
It says there are no setters on the element.
I tried using aria selectors instead
const DraftEditor = getByRole('textbox')
DraftEditor.value ='something';
fireEvent.change(DraftEditor);
I tried same again using query selector const DraftEditor = container.querySelector('.public-DraftEditor-content'));
Has anyone managed to text a rich text input with draftjs and react testing library?

April 13, 2019 at 10:22am
Hi. Use jest.mock and render a textarea instead. Testing complex 3rd party components is not worth it
Edited
like-fill
3
  • reply
  • like

May 2, 2019 at 9:48am
But then I wouldn't be testing if the editor works. This defeats the points of writing the test. Knowing that a text area passes the test and then shipping a draft editor isn't going to help me sleep better at night.
Edited
like-fill
2
  • reply
  • like
I managed to get around this for now by just using cypress to test this, work like a charm but takes ages. Still looking for a solution if anyone has hit this wall before.
  • reply
  • like
Found some discussions about this but couldn't get any of the proposed solution to work with RTL:
Edited
  • reply
  • like

May 10, 2019 at 2:32pm
I'm in the same spot where I can't find good ways to simulate user input on a draft editor!
have you had any luck? I could fire keyDown events on it, but each successive keyDown would delete the previous input.
separately I tried cypress, which mostly works, except shift-arrow selection :sad:
Edited
  • reply
  • like
I did everything through cypress and it works perfectly. It's just slow and cumbersome running end to end tests when I want to change how editor specific features work. Integration tests would have been better for the kind of work I'm doing but cypress gets the job done.
Edited
  • reply
  • like
right on I'm in the same situation. mind if I shoot you a message about this? curious if you have any code in the wild I could look at. happy to send stroopwafels from the Netherlands as a thanks ✨
  • reply
  • like
Im working on a client project so its a private repo but I can share the test. One sec.
  • reply
  • like
it('creates a new deck', () => {
user
.login()
// create a deck
.getByTestId('createNewDeck')
.click()
.getByTestId('deckName')
.clear()
.type(fakeDeckName)
.getByTestId('deckNameSubmit')
.click()
.getByTestId('editCard')
// fill in the header box
.getByTestId('newTag')
.click()
.getByTestId('tagInput')
.type(fakeTag)
// fill in the question box
.get('.public-DraftStyleDefault-block')
.type(fakeTitle)
// fill in the media box
... goes on to fill out the rest of the form
});
Edited
like-fill
1
  • reply
  • like
.get('.public-DraftStyleDefault-block')
.type(fakeTitle)
Thats it. That the bit that gets the magic done.
  • reply
  • like
okay yeah I've had success with that! I'm having issues with doing a combination of shit+arrow and creating a selection range (that isn't the entire contents)
like-fill
1
  • reply
  • like
I'll post something on the cypress community after a little more research
  • reply
  • like
thanks for replying so quickly!!
  • reply
  • like
The element I'm updating is
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
handlePastedText={this.onChange}
/>
Edited
  • reply
  • like
That just the default import import { Editor} from 'draft-js';
  • reply
  • like
I'm taking rich text, turning it into markdown, storing it then retrieving it as markdown and displaying it. To test that all this is happening as expected I also have a preview card on the form that gets updated as it is filled out. I then test the preview card to make sure the text is showing up as I want it to. Not sure if that helps you, but it helped me.
Edited
  • reply
  • like
okay yeah I've had success with that! I'm having issues with doing a combination of shit+arrow and creating a selection range (that isn't the entire contents)
You mean you are trying to select a range of text? What about just using .getByText() from cypress-testing-library? You could probably regex only the selection you need?
Edited
like-fill
1
  • reply
  • like
awesome! didn't know that was a thing. just picked up cypress yesterday so still learning :D
  • reply
  • like
Cypress is a whole bag of fun. The docs are fantastic, Kent C. Dodds has an excellent course on it, egghead has one too. And definitely use https://testing-library.com/docs/cypress-testing-library/intro, makes thing much simpler. best of luck. Message me if you have questions.
like-fill
1
  • reply
  • like
thank you!
like-fill
1
  • reply
  • like

June 3, 2019 at 5:49pm
Has anyone figured out the draftjs + RTL magic yet? Stuck on the same problem myself 😕
  • reply
  • like

June 5, 2019 at 9:51am
the modules I am testing are custom draftjs plugins which rely on the editor to fire specific events and callbacks. Mocking it would be overly-complex and the result would likely not mirror the real behavior - so mocking is not an ideal solution for me here.
  • reply
  • like

November 4, 2019 at 9:41pm
Has anyone succeeded with this issue? sorry, but your suggestion is useless due to reasons mentioned above. What's the point of using a textarea instead of a custom component, taking in regard that it's not even a text area that's used in the initial draft-js?? How is that supposed to resemble how real app works??
like-fill
1
  • reply
  • like

November 6, 2019 at 11:53pm
So If I understand correctly, everyone here is trying to test draftjs when draftjs should be tested internally. You should assume 3rd party libraries test their own code and if they aren't... well then maybe you should pick a different library. solution isn't useless, in fact it is the correct solution.
like-fill
1
  • reply
  • like
Show more messages