Then I tried it with React Hooks and everything looks like it’s playing out okay but the tests fall short.
I’m especially confused why I can see the Previewer filled with the right formatting and also see the correct HTML elements in the DOM (with Chrome Dev tools) but some of the errors just don’t match what my eyes see.
Is there something with React that needs to happen on the page load so that the tests register the various elements?
That’s because when you’re calling cleanAndSetText the value of markdown is still the previous value, not the updated one.
The code between L20-L25 should be:
cleanAndSetText(e.target.value); // pass the updated value
}
}
const cleanAndSetText = (markdown) => { // new value
let cleanHTML = DOMPurify.sanitize(markdown);
Also you’ll need to pass sampleCode in initial useEffect.
I thought within the function cleanAndSetText the DOMPurify was purifying the current markDown useState variable above which is why I didn’t use a parameter for that function.
But I think you’re saying, while that may be true that markDown value is old. So I really need to provide a parameter to cleanAndSetText and pass it the argument event.target.value so it’s the most current value.