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
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.
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?
I'm using the React Enzyme Jest module to test my React app which contains the antv/g2plot module for charts. While I am using the module, the test case isn't running but after removing it, it's working perfectly fine. There is a problem with the model I think. Do you know any possible solution?
I'm trying to test the file which is using the antv/g2plot module for chart while testing. It's failing and giving a random error which is not relevant (the error variable not defined in my React app). If I try to run the test without this file it's running pretty well but with it it returns this error.
I'm the member of G2Plot dev-team. When you write unit test for chart with canvas, you should:
mock the canvas API, see https://github.com/hustcc/jest-canvas-mock
give the real document(include canvas) env, see https://github.com/hustcc/jest-electron
G2Plot use jest-electron for unit test and debugger.
When i customize vscode source code, i found it hard to add a page.
I know there are many ways to do so, such as Part/Widget/Browserwindow, but only if i new a Browserwindow can i explicitly load html and js files like in chrome browser and it's friendly.
If i use a Part or a Widget, i need to use native js api to do dom manipulation, and it's so inefficient,
~~so i want to know how did vscode team decide to use no ui framework during the development? Is there some trade-off?~~
i tried to import react and react-dom directly in my own contrib file /vs/workbench/contrib/dialog/browser/dialog.ts, and then get successful compilation and the react component shows up, but i don't know how to add babel with the compilation procedure, so i use react without jsx.
so i want to know how to import react framework into vscode source code project to create ui component? Is there some practices?
I'm trying to wire up Jest testing with React and I've copied and pasted everything from the Using Jest with React Tutorial into a demo project and I'm getting a TypeError saying that some Object in node_modules/react/lib/ReactUpdates.js doesn't have the function getPooled(). As far as I can tell this is happening at var React = require('react/addons') inside the CheckboxWithLabel-test.js file. I feel like this is something really simple that I'm just overlooking but I can't find anything.