Marked Previewer failing tests

JavaScript
1

Is there a way to look at the test cases, particularly the strings used for testing, in the Markdown Previewer tester? I’m failing on test 3 and 4, the markdown doesn’t match the preview box, yet to me, it appears to. I’m not sure how to narrow this down.

3. When I enter text into the #editor element, the #preview element is updated as I type to display the content of the textarea

#preview is not being updated as I type into #editor (should update on every keyup) : expected 'W' to equal 'a'

4. When I enter GitHub flavored markdown into the #editor element, the text is rendered as HTML in the #preview element as I type (Hint: You don't need to parse Markdown yourself - you can import the Marked library for this: https://cdnjs.com/libraries/marked)

#preview's only children should be those rendered by marked.js : expected '<h1>Welcome to my React Markdown Prev…' to equal ''

Test 5 and 6 pass. Optional test 7 fails despite setting gfm and breaks to true in the marked-react component.

This is my Preview component.

import TitleBar from "./window/TitleBar";
import CopyBtn from "./buttons/CopyBtn";

import Markdown from "marked-react";

import {faMarkdown} from "@fortawesome/free-brands-svg-icons";
function Preview({output}) {

    console.log(output)
    return (
        <div className={"window"} >
            < TitleBar title={"Preview"} icon={faMarkdown}/>
            <div id={"preview"} >
                <Markdown gfm={true} breaks={true}>{output}</Markdown>
            </div>
            < CopyBtn content={output} />
        </div>
    )
}

export default Preview;
2

Hi @saust,

One thing that might solve one of your issues is the import of a package to dynamically watch the state of the input text in the #editor section.

Is this something that you are missing?

1 Like
3

Please provide all your code. Post a repo or use Stackblitz or Codesandbox.

1 Like
5

Hey, thanks for the reply. Here is the repo on Github

6

Hey thanks for the reply. That’s a great idea, is there any you suggest to do this?

7

The repo you provided is just a CRA starter. It doesn’t have any code related to this project. Please update it with your actual code use for this project.

As an aside, I would suggest you use Vite instead of CRA.

1 Like
8

Sorry I hadn’t pushed the branch.

Here it is -

I will look into Vite, thanks for the recommendation. :slight_smile:

9

Remove the useEffect and output state. You can just pass down input to the Preview component.

With the useEffect I have to switch to the old render method for it to pass the tests (read the note on the challenge page). But that doesn’t really matter, unnecessary useEffects should be avoided.

1 Like
10

Thank you, it has now passed the tests.

I will go read the note as I’m a bit perplexed but I know tests can be picky on these sort of things.