Summarize the problem
To begin with
To build a custom React components library, I've followed this guide (Building a React Components Library). The author uses react-styleguided along with emotion for styling, but I've found myself being more prolific with SASS, which I know already.
Setup
After some research I've set Babel and Styleguided's webpack to work with SASS. However, Jest would return failed tests because of #import rules in my *.*sass files.
This blog post here (Testing React components with Jest and Enzyme) helped me to figure out how I would do it work and, after a little work, I got all functional tests so far.
The "problem"
But I'm not finding any proper documentation on "how to write styling tests for SASS". Actually, I'm not even able to understand how I could work it out, since testing components is a new thing for me. This is my first React components library.
Is there any resource I could reach to learn about it?
Related
I'm using Turborepo to build a Typescript monorepo which contains a number of packages that make up a UI framework. The first component is a very basic multi-panel display that is transpiled to ES6 using tsc. The package transpiles and builds correctly, but when I attempt to import one of the JSX components from the package, I get the following error.
I'm pretty new to working with monorepos, so I'm sure there's some configuration somewhere I've missed, but this is working with Turborepo out of the box and I'd been hoping that it would Just Work. The repo structure is the default Turborepo structure but I've attached that anyway in case I've missed something there.
I am trying to render my REACT components via SSR with REACTJS.NET in ASP.NET project.
In the JS file for SSR, I'm importing SimpleBar component from simplebar-react package.
This is causing the error TypeError: Object doesn't support property or method 'forwardRef'.
I currently have 2 JS files, one for server and one for client. In the JS for server I am removing the adding of event listeners and similar. However, I can't get away from importing at least the npm package in both JS files.
Any idea on how I can avoid such error?
I am using Webpack + REACTJS.NET version 3.2.0.
So, after trying a lot of things, this is the best solution I came across.
Before I begin, I am aware that conditional imports is being introduced in ECMA but it isn't working for me, or at least, they way I have the project setup.
Basically, my solution is resolved by mixing ES6 with CommonJS and with help of Webpack and babel.
In Webpack I am creating a plugin:
And in code, when I want to import the Simplebar react component, I do the following in the constructor:
And then, whenever I want to use my imported component, I do the following:
This was the best way I found in order to render with SSR. I think it's okay since the content between server and client side are the same.
Does anyone know a better solution? Or do you have concerns?
I was surprised that many blogs are writing unit tests for React Applications using both Jest and Enzyme.
Cant, we write unit tests for React applications by using the only jest or by the only Enzyme??
If yes, to get a component we use shallow() in enzyme but what we use in Jest?
I think you didn't fully understand the concepts of jest and enzyme.
Jest
TL;DR: Jest is just a test runner on steroids for JavaScript (not just react).
The main functionality of jest is to execute JavaScript tests. It gives you tools to organize your tests, e.g. using describe, it or test blocks. jest comes with a lot of build-in assertions (e.g. expect(actual).toBe(expected)) to help you identifying failing and succeeding tests. On top of that jest comes with additional features, for example it allows you to easily mock functions or even complete modules.
jest is not bound to react in general, but does quite well in combination with react, since it is maintained by facebook just as react itself. So it's basically almost everytime the right joice and also recommended by react.
Enzyme
TL;DR: Collection of utilities to simplify testing/rendering react components.
Technically you don't need Enzyme or any other framework to test react components (only jest). react already exposes react-dom/test-utils but it's really cumbersome to work with those without properly wrapping and simplyfing its API. And that's exactly what enzyme is doing. It basically puts a layer of abstraction over react-dom/test-utils and adds a bunch of utilities, so you don't need to worry about implementing them yourself.
I highly recommend you to look at react-testing-library, an alternative to enzyme, and read "Testing Implementation Details" blog post authored by its founder.
react-testing-library is, like jest, recommended by react.
Jest and Enzyme are not comparable.
Jest don't give you rich API/function to access dom elements like enzyme but it does other important tasks like when you hit command npm test or npm run test jest collect all the test file eg all files ending with .test.js run each test cases within these files and show the result in the console like below its jest responsibility.
Jest is a testing framework or test runner which runs all the test files in one go, enzyme is a utility or library consider this a smaller thing compare to jest it gives many functions to access dom easily like shallow, mount, find, children, etc...
have very simple sample app which build Create React App + Styled-Components to prove this issue. But I have real big application which I am facing this issue which I am going to explain it below.
I would like to pre-render this app with Rendertron for SEO/GoogleBots and etc. But the problem is when I build PRODUCTION version of React App which use Styled-Components . all the style will be missing on static version which Rendertron produced, but from other side if I try the same workflow with dev-server of app , everything looks fine .
So far I know there is different on PROD version and DEV version of my application when I render it with Rendertron . But I am not sure what cause this issue and how I can fix this issue .
I am looking for solution or idea which can help me to solve this issue .
Here is my sample code which I peppered for test .
https://github.com/AJ-7885/test-styled-component-with-rendertron
Here is screen shot from different version of Rendered version by Rendertron base on PROD or DEV version of the same application .
enter image description here
After a lot of searching around, I finally found out the reason. The Styled Components library uses something called the "Speedy mode" to inject styles on production. This makes the styles bypass the DOM` and be injected directly inside the CSSOM, thus, appearing in the inspector, but totally invisible on the DOM.
Fortunately, Styled Components 4.1.0 came with a fix for this issue! Now you can set a global variable called SC_DISABLE_SPEEDY to true in order to disable the Speedy mode and get the styles to appear on Production as well.
Reference: https://www.styled-components.com/releases#v4.1.0
But the only part I am not sure , how to set disable this Speedy Mode in Create-React-App without Ejecting , Dose any body has any idea ?
You need to render your styles on the server side and inject those styles in your pre-rendered react app. Styled-components explains how to do that here: https://www.styled-components.com/docs/advanced#server-side-rendering
Also, I'd recommend using react-snap for pre-rendering since that is recommended by the Create React App docs. react-snap seems to be more of a React-specific solution that may be easier to implement, especially with styled-components.
I have react-i18next working for the code that runs in the browser, however all our storybook examples are broken because we only test an individual component.
Can someone explain (with examples) how to get storybook that shows individual components working with react-i18next?
Just added a storybook example to react-i18next examples: https://github.com/i18next/react-i18next/tree/master/example/storybook
did not run into any issue...could you please give us more detail on your configuration?