search

RocketCommunicationsInc / astro

Astro UXDS is a collection of guidelines, patterns and components for designing space-based user interface applications.
https://astrouxds.com
Other
108 stars 25 forks source link

RuxTable React export does not exist #140

Closed kit047 closed 2 years ago

kit047 commented 2 years ago

Attempting to use the RuxTable component from @astrouxds/react seems to work in development. I can see the table and populate it, though it doesn't look like the Storybook version. The issue is when running unit tests on it via jest, I am getting an error: 

SyntaxError: The requested module '@astrouxds/react' does not provide an export named 'RuxTable'
          at async Promise.all (index 10)
          at async Promise.all (index 0)
      at jasmine2 (node_modules/jest-jasmine2/build/index.js:228:5)

Looking into the Storybook, the code behind the sample RuxTable is using the Lit-Element component. Am I missing something? Or is there no React-wrapped component for a RuxTable?

kit047 commented 2 years ago

Realizing this might be better for the Discussions page - let me know and I can transfer it

micahjones13 commented 2 years ago

Thanks for bringing this up! It can remain here as an issue. I'll look into it and post any updates here.

micahjones13 commented 2 years ago

I've got an example repo of RuxTable being tested for here: https://github.com/micahjones13/RuxTableReact There is also a codesandbox here, but the testing doesn't work due to what seems like codesandbox (or more likely my own) limitations.

Regarding RuxTable not looking like the Storybook example, make sure you have the astro stylesheet imported: import '@astrouxds/astro-web-components/dist/astro-web-components/astro-web-components.css

Testing with web-components that use shadow-dom can be tricky and I think the important thing here would be the test script itself: "test": "react-scripts test --transformIgnorePatterns=\"node_modules/(?!@astrouxds/react)/\" --env=jsdom", which helps with the jest configuration. This example is using the react-testing-library, so depending on how you're writing the tests, this may not be helpful.

I hope this is helpful! If it's not, I'm more than happy to keep looking into it - a code example of the tests you are using would be helpful for any further investigation.

Thanks!

kit047 commented 2 years ago

Not sure what was going on with the styling, I had the .css file imported originally but I guess it wasn't taking. Played around with it a bit and suddenly it looked fine. Not sure exactly what I did, some kind of combination of rm -rf node_modules/ and npm install again as well as restarting my workspace.

As for the error I posted above for anybody looking, what seemed to fix that was updating our test script call. Originally, we had NODE_OPTIONS set to NODE_OPTIONS=--experimental-vm-modules. Swapping this to NODE_OPTIONS=--experimental-modules made the issue go away and tests pass.

Thanks for the quick responses!