I'am creating a react application by using less instead of css, I added the less loader in the file config-overrides.js in order to use it with the package customize-cra. The application looks like perfect, nevertheless when I execute yarn test which launches jest runner all less styles are undefined so I cannot test if a component has a concrete className because it's undefined too. Should I add anything in the jest configuration in package.json in order to make less availale during testing ?
Thanks!
Related
I'm using TailwindCSS to implement a React App, and Jest to test it. I expect changing the window size can cause some elements to appear and disappear. Then I realized jsDom doesn't load TailwindCSS, and I followed React testing library can't read styles using Tailwind CSS classes and successfully injected the compiled CSS into document.head of jsDom. However, after I changed the window size by using
window.innerWidth = 480;
window.dispatchEvent(new Event("resize"));
expect(window.innerWidth).toBe(480); // This passes
expect(screen.getByTestId("nav-bar-bottom")).not.toBeVisible(); // fails
the element that should be gone still exists.
I hear someone mentioned jsDom doesn't support responsive test. So how responsive tests should be conducted then?
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 want to test something like layout using Jest and Enzyme. But Jest uses JSDOM to simulate the real browser environment.
I can only use Jest in this old project. How can I do it?
Here are some descriptions in JSDOM: https://github.com/jsdom/jsdom#unimplemented-parts-of-the-web-platform
We are using some custom client library (added as dev dependencies in our package.json) which has all configurations related to jest and react JS. However, we are facing some issues while executing the test cases in which its failing because of images import in the source code. On further investigation, we saw that we need to mock the image import as a jest by default does not understand image import.
To mock the image import we need to add transform in package.json and add some script like below link:
Jest + Enzyme: How to test an image src?
However, this config is not present in the library and we cannot edit package.json of libraries.
Is there any way to override that jest configuration in the project itself?
You can probably override it within your apps jest.config.js
const getJestConfig = require('')
module.exports = {
...getJestConfig(),
// do your bits
}
}
I'll try to describe the problem I'm trying to solve in order to avoid the XY Problem.
I've got a React application that is transpiled (by either Babel or TypeScript). Now, I've set up Webpack to have it transpiled and then bundled into a single script, and then to update my index.html to link to that script. However, I'd also like the build process to do an initial render of the application and to insert that into index.html.
My attempted solution was to add a custom loader to the html-webpack-plugin that requires the React app, renders it and then inserts it into the HTML file. However, now that my React app is not written in Javascript, I can no longer simply require() it.
How can I best get it transpiled before rendering it and inserting it into my page?