learn-co-curriculum / react-jsx-lab Goto Github PK

Can your rephrase the delivery to say heading or h1 instead of title?

This component should contain a title with the text The world's coolest webpage.

Hello,
I'm facing an issue when I run learn.
I get the following in the IDE.

/usr/local/rvm/gems/ruby-2.3.1/gems/learn-test-2.5.6/lib/learn_test/strategies/mocha.rb:42:in `results': undefined method `[]' for nil:NilClass (NoMethodError)
        from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-test-2.5.6/lib/learn_test/reporter.rb:47:in `report'
        from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-test-2.5.6/lib/learn_test/reporter.rb:13:in `report'
        from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-test-2.5.6/lib/learn_test/runner.rb:44:in `report_and_clean'
        from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-test-2.5.6/lib/learn_test/runner.rb:21:in `block in run'
        from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-test-2.5.6/lib/learn_test/runner.rb:20:in `fork'
        from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-test-2.5.6/lib/learn_test/runner.rb:20:in `run'
        from /usr/local/rvm/gems/ruby-2.3.1/gems/learn-test-2.5.6/bin/learn-test:68:in `<top (required)>'
        from /usr/local/rvm/gems/ruby-2.3.1/bin/learn-test:23:in `load'
        from /usr/local/rvm/gems/ruby-2.3.1/bin/learn-test:23:in `<main>'

I figured out the solution to anyone curious! go to your package.json file and update the "mocha": etc...
to:
"mocha": "^5.2.0"

then run npm install. That fixes it. Hopefully learn fixes that for everyone soon!

Without exporting the components or handling their failed imports in the testing suite students have been met with some difficult to decipher error messages. This is copied from issue that came my way:

What is the student trying to do? Trying to run the learn command to have the program do tests.

What are we expecting to happen? We are expecting test output

What's happening instead? (screenshot attached) abbreviated error message (see screenshot): /home/learn/.rvm/gems/ruby-2.3.6/gems/learn-test-2.5.5/lib/learn_test/strategies/mocha.rb:42:in results': undefined method []' for nil:NilClass (NoMethodError)

Is this happening every time? How often has it been happening? For how long? It happens every time after multiple attempts to run learn.

What have we tried to resolve the problem? (screenshots attached) Tried changing mocha version in package.json. Tried running npm install and npm update. These attempts did not change the error message.

Responded with potential solution:

I took a look at the lab and found any errors to be a result of not exporting the components (which is part of the lab’s deliverables). The tests don’t handle errors thrown when trying to import non-exported components. I see three ways of dealing with this from curriculum perspective:

The readme is explicit that they need to create and export the modules

The tests capture errors thrown when attempting to import un-exported components and propagate actionable feedback to the student (some of the new react 2.1 curriculum does this)

The starter files come with blank exported components

@Lukeghenco
learn command throws error, so test results are not pushed to learn.co. Same issue as here:
learn-co-curriculum/react-components-lab#9

the react-test-renderer node module is missing from the package.json.

"react-test-renderer": "^15.5.4" should be added under devDependencies

Webpage
In the components/Webpage.js file, create a React component called Webpage.
This component should contain a title with the text The world's coolest webpage.
This component should also contain two instances of the FillerText component.

1. The tests require that both the "title"(which is actually asking for a h1 header) to be in DIV tags. Unless they are in div tags the test does not render. This is a huge problem and must be explicitly mentioned.

2. The world's coolest webpage. Confusing students with the JSX syntax $#x27; for a ' is not conducive to learning React well. This is confusing and the text should not require ' in JSX for future students.

3. Overall, I'm having a hard time understanding the pedagogical method behind the teachings. There are outdated gems that are difficult to figure out, tests that are not dynamic and near impossible for students to figure out.

It may be worth noting the syntax for closing html input tags in JSX.
For example:
class SomeClass extends React.Component{ render(){ return ( <form> <input type='text'> </form> ); } }

This code will give you an Unterminated JSX contents error when running npm run bundle because the input does not have the / (ie <input type='text'/>).

React doc that shows this

Should look like. It is super confusing to figure out without looking at the solution branch.

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.
/Users/traci/code/react-jsx-lab-learn-experts-testing-batch/node_modules/react-dom/lib/ReactCompositeComponent.js:306
return Component(publicProps, publicContext, updateQueue);
^

TypeError: Component is not a function
at /Users/traci/code/react-jsx-lab-learn-experts-testing-batch/node_modules/react-dom/lib/ReactCompositeComponent.js:306:16