5
spacehash
128d

I’m so sorry if this is the place for questions. I’m terrified of stack overflow and have been searching for a week for a solution and can’t find one. This is for React.js people.

I was tasked to create a webpage with react. The limitation is, they did not wanna adopt the node.js dependency. I said ok, I’ll figure it out. You can inject react, material UI, and babel with script tags in HTML, then put ur lil components in it. I did that and it works beautifully.

However, now I have to write tests for this. I think it’s actually impossible without a way to render React, so I have to use the browser, or node, right? I convinced my boss to allow me to use a node.js container just for testing, which I thought would make my life easier.

I don’t know how to render this thing with node. It’s just an HTML file that pulls react via script tags, and idk how to serve html with node. Additionally, none of the React testing libraries seem to support testing a system that wasn’t designed to be served with node, at least not easily. My gut tells me that the complication with how things are imported contributes at least a little to this (dependencies pulled via script tags in the HTML file and made available to react through global const variables).

I could be wrong about any of this — im fairly new. But how tf do I go about testing these react components? For reference, if you go to Reacts docs, there’s a section called “add react to a page in one minute” that’s pretty much what I did.

Comments
  • 2
    You might be interested in browser automation using Selenium: https://www.selenium.dev/ .
  • 1
    @Oktokolo boss doesn’t wanna go in that direction :/ he wants me to use a react testing library
  • 0
  • 9
    I mean i get they’re condescending assholes and everything but you really that scared of pathetic losers on the internet who try too hard?

    Just ask the question on SO lol they’ll answer it or you’ll trigger some neckbeard virgin. Its a win win if you ask me
  • 0
    @black-kite is it possible due to paragraph 4
  • 0
    Why not use the oficial react testing library:
    https://reactjs.org/docs/...

    Also I'm sure there are plenty of tutorials on how to serve a react app using node/express lol, but tldr you just take the react build and serve it as static files, I'm sure you'll easily find it on the web.

    Also if you only need some easy to setup test POC you can use Cypress, it s a JS automation testing library, easy to setup and no hassle with Selenium (ugh).
  • 0
    @vBitza I ran into complications with them via paragraph 4, but I’m looking more into jest to see if I can make it work.
  • 0
    @spacehash check my updated comment, add some more info regarding serving the react app
  • 0
    @vBitza So I’m serving it just fine. If im not mistaken, I need to server-side render the components in order to test, correct? And I’m not allowed to use selenium or headless browsers per my bosses specifications.
  • 3
    @spacehash Does your boss enjoy seeing you suffer on company time? Node is a fundamental element of a JavaScript toolchain. It's a dev dependency and need not influence the production setup. There's literally no reason not to use it if you're making a React app anyway.
  • 0
    @lbfalvy his reasoning is that it becomes a dependency and versioning nightmare when worked on by multiple developers. I strongly disagree but it’s whatever I guess
  • 0
    @spacehash Just dockerize it, that's what I'm doing in pretty much every project because I'm not gonna install a particular version of fifty Python packages just to fix someone's shitty Django app.
  • 0
    @spacehash NPM's preference for locally installing packages actually makes it one of the best dependency managers out there.
  • 1
    @spacehash I recommend walking up to your boss and punching them in the face. What an asshole…
  • 2
    React without Node because you don't want to deal with dependencies..........

    WHY THE FUCK ARE YOU USING REACT??

    Honestly, throw it into a docker container and use jest, or use selenium / cypress and move on.

    What are you trying to test?
    Components appear on the dom when told too or the actual business logic?
  • 1
    @C0D4 boss said just testing your first case is enough. I’m pursuing using jest in a container rn, I’ll let you know how it goes :)
  • 2
    StackOverflow really is your place my bro, just power through the jerks. It's basically a rite of passage
  • 0
    @spacehash my first case? You mean just showing up in the dom?

    😞you could snap something up in selenium in 5 minutes to test that. Seems like a waste of effort if that's the case.

    Good luck with this insanity.
  • 0
    @C0D4 thank you, I’m doing my best haha. It’s kinda fun doing something so challenging — at least he’s acknowledging it’s hard and giving me time to do it
  • 3
    When your boss goes to ride a bike, tell him that he can ride it, but first he has to take the tires off in order to prevent them from being punctured!

    This can be done but I find it kinda insane!
Add Comment