Comments (14)
I am actually thinking about using https://github.com/kentcdodds/react-testing-library if it's ok with you!
from react-three-fiber.
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.
from react-three-fiber.
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.
from react-three-fiber.
yep, do you have any preference on the test infrastructure?jest enzyme react-test-renderer?
from react-three-fiber.
that seems perfect!
from react-three-fiber.
@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?
from react-three-fiber.
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.
from react-three-fiber.
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!
from react-three-fiber.
@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.
from react-three-fiber.
absolutely, they can de done with anything you export that doesn't use canvas!
from react-three-fiber.
👀
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 🙃
from react-three-fiber.
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.
from react-three-fiber.
it has tests. not many but they work.
from react-three-fiber.
@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
from react-three-fiber.
Related Issues (20)
- How to render text on top of material from list of materials? HOT 1
- Invalidate is not behaving as expected HOT 5
- Can we modify useLoader to accept an empty string or null? HOT 1
- XRFrame type resolving incorrectly HOT 2
- Error loading OBJ model in React Native HOT 2
- Help: TypeError in is.equ HOT 4
- Primitive with children mounting / unmounting + documentation HOT 4
- This sandbox doesn't work HOT 1
- Canvas eventHandler: onWebGLContextLost, onWebGLContextRestored HOT 2
- Cannot catch error HOT 1
- Is it possible to use react-three-fiber with React-Native CLI application? HOT 1
- help: using the onPointerDown event of a` <group/>` and the event.handlers of `useThree()` together HOT 1
- Types: Removed classes from three.js are still available at R3F HOT 3
- Rendering `<Context.Consumer.Provider>` is not supported HOT 1
- R3F & StereoCamera
- Breaking changes in React experimental branch HOT 1
- Cannot read properties of undefined (reading 'boundingSphere') HOT 1
- Forced landscape HOT 1
- load gltb file show error `Uncaught Invalid typed array length: 64548` HOT 1
- Updating from 8.15.19 to 8.16.1 causes 'demand' frameloop issues with @react-spring/three HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-three-fiber.