React-three-fiber: Tests?

[bl4ckm0r3]

do you have in plan to write tests?

[drcmda]

yes, that will be super critical and one of the priorities i have! but im still swamped with work on the reconciler itself. do you want to help? i could really need it.

[bl4ckm0r3]

yep, do you have any preference on the test infrastructure?jest enzyme react-test-renderer?

[bl4ckm0r3]

I am actually thinking about using https://github.com/kentcdodds/react-testing-library if it's ok with you!

[drcmda]

that seems perfect!

[bl4ckm0r3]

@drcmda quick comment, for what I have seen unit testing may be a bit challenging while using gl context (mainly because it's not implemented in jsdom).
There are different solutions but I don't have much experience with it.
Would you be alright with acceptance tests with puppeteer and visual diffing?

[drcmda]

yes, that would be fantastic. i was wondering ... because node doesn't support gl, but basic react-testing-lib snapshots, and visual regression testing would go a long way.

[bl4ckm0r3]

so, the snapshots can be done only when we are not using canvas basically :) i could test functions (would probably need to export some of them)! i have a couple of branches with the environment setup (And initial tests) i have modified the stars example to spin up a cube (without star randomness) and do the click + zoom tests and it's actually pretty cool :)
I'll do a pr with puppeteer first, and then think about the unit testing!

[drcmda]

@bl4ckm0r3 i was thinking, maybe we can do unit tests with the reconciler, which can be used standalone without the canvas. Especially the applyProps function which has all the heuristics for writing attributes, dash case piercing, etc.

[bl4ckm0r3]

absolutely, they can de done with anything you export that doesn't use canvas!

[granmoe]

👀

Will be watching this eagerly 🙂

I need to figure out how to test a three.js app somehow. My dream solution would be to feed in some user actions and snapshot or assert against the structure of the rendered output. Clicks would have to be tied to a specific client x/y somehow...not possible unless you actually do rendering in tests, which rules out jsdom and similar FE testing options and suggests perhaps a combination of E2E testing and some kind of unit / integration testing that doesn't need to know about how to interact with things in the canvas.

Although...would it be possible to expose some kind of helper that somehow serializes the state of a scene? Kind of like a JSON structure of the component tree in react, but the three.js version. This would open up the possibility of testing the structure of the rendered output. (Then you could have a test like, "When this object is clicked, a new object with these properties is created within some other object.") Crazy idea, but worth throwing out there 🙃

[drcmda]

we had a first stab at visual regression testing (it's still a PR) which would be amazing. react unit testing otherwise should be possible out of the box. this lib is still struggling with typing atm, and we haven't gotten to a point of wrapping it up. if types run, tests should be next. any help i can get for this would be appreciated.

[davidmartos96]

Is there any update on this topic? Some example repository for instance?
I'm wondering if it would be possible to create tests using packages such as https://www.npmjs.com/package/gl or https://www.npmjs.com/package/canvas but I have low experience with such solutions. I'm not even sure if it would be possible at all.

[drcmda]

it has tests. not many but they work.

[davidmartos96]

@drcmda Oh I see that. I was referring to creating tests as an user of the react-three-fiber library. Looking for some way to test mouse behavior and such with components rendered with Three fiber. Sorry for the confusion