Need help with CodeSandbox

[kjones12345]

I am ready to submit a project. I am open to any feedback from anyone, but I composed the text below to be read by someone with the authority to evaluate and accept projects for Free Code Camp:

I have a problem. I wanted to get a better grasp of basic React, so I decided to elaborate on the Markdown Previewer project by adding more interactivity. This required writing more code and I needed more modularity than CodePen supported. So I decided to learn and use CodeSandbox for development. The problem I’m having is that the test code in the CDN doesn’t work well with CodeSandbox. I can add the test code as an external resource and everything seems to work fine (I pass all 8 tests because I did the extra credit by setting the correct marked options). But when I refresh the page (which you would need to do in order to see if I passed the tests), everything breaks and I just see an error message.

In order to test my project, I can share my sandbox with you and walk you through how to run the tests yourself, if that would be OK with you.

First, in order to share the sandbox with you, I’ll need either your CodeSandbox username or an email address to invite you.

Once you’ve accepted the invitation, go to https://codesandbox.io/s/markdown-playground-forked-v3ps3, install the test code, and run the tests without refreshing the page. Here’s how to install the test code:

In order to install the test code, go to the section on the left that shows the files, scroll down to “External Resources”, click the arrow to expand that section, scroll down to the bottom, put the link to the tests in the CDN into the text input under “External URL”, and click on “Add resource”, then run the tests that appear in the app.

If you want to further investigate the app, go to the section on the left again, find “bundle.js” in the list under “External Resources” and hover over it to see the “x” appear on the right, click the “x” to delete it, then refresh the page.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36

Challenge: Build a Markdown Previewer

Link to the challenge:

freeCodeCamp.org

[jwilkins.oboe]

Hi @kjones12345 !

Welcome to the forum!

I tried adding the script tag to one of my old FCC projects and ran into the same issue on codesandbox.

My advice would be to test everything locally with the test suite and make sure all the tests are passing.
Then go back to codesandbox and remove the test suite and submit the project to freeCodeCamp.

Hope that helps!

[kjones12345]

Great advice! That makes perfect sense. The person testing my app will naturally install the tests and immediately run them, without refreshing the page, so they will run without a hitch. Thank you!

[lasjorg]

You can also use the react-fcctest package. As far as I can tell, all it does is use Helmet to add the script to the page (source). So that is another option as well you can try on your own.

Not sure what the problem is here, it usually works when adding the script using the External Resources, as opposed to adding it to the HTML which seems to cause issues on CodeSandbox.

[kjones12345]

@lasjorg, thanks for the feedback. Yeah, I tried both adding the tests to the HTML and adding them as an External Resource. I got the same results either way. But all is well. I followed the suggestion made by @jwilkins.oboe and my project submission was approved.

I got overly ambitious on that project and I just can’t imagine doing what I did without the support of a filesystem. I started a port over to a CodePen Project to see if I could run the tests in that environment, but I quickly hit the wall when I realized that, in the free version, you are limited to 10 files. But just yesterday I broke down and upgraded to the Pro version, so a CodePen Project might be a viable option in the future if I want to handle a project with sufficient complexity to warrant it. Right now, I’ll stick with CodePen. Using the Pro ability to handle Assets really helped with the Drum Machine project.

I liked working on my “Markdown Playground” project in CodeSandbox. I may try it again in the future. If I do I’ll try using react-fcc. Thank you for the pointer to the package!