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?
Related
I am building an app using Create React app with TypeScript. I am trying to create some tests (doesn't really matter what test) and Jest fails (see screenshot below)
As I understand Jest doesn't like "import" as it runs in node. How can I get this to work? This is a Create React app straight out of the box so I thought it would be configured to deal with es6 modules. I have tried the options in the screenshot but I can't get anywhere. Any help would be great, TIA
I've been researching this, but I couldn't find any solutions.
Inside the .storybook' folder, there's a main.js file, and in it, there is this line:
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.#(js|jsx|ts|tsx)", "../tmp/**/*.story.mdx"], which several people have said is the solution to a React component not showing, but I have it, and it's still not showing!
I also tried deleting the .cache folder in .node_modules, but still not working!
I build and re-started storybook several times already.
I know the component itself works, because, there are two react components that I need, and both are done in two different github branches, and checking out into each branch allows you to run storybook and see that the component I want is showing and working properly. But I need both components on the same place, and I tried to re-create one of them into the branch of the other, but it's not showing on storybook! The component code is identical, so I know it's not a problem with the code or the component. It has to be something related to storybook.
Do you have any other ideas? Anything I'm missing to check, or adjust? I don't really know much about storybook, so keep that in mind. It's just used here in this company, and that's the only way to run your React components.
I don't get any errors on my vscode either!
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.
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?
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.