Comments (12)
This generally suggests that you have some kind of a build tool setup / configuration problem.
What build tools are you using?
Can you share a Github repo that shows this problem happening?
edit sorry, just realized you said "it works fine when running, but fails with tests". What test tool and version are you using?
from reselect.
Unfortunately can't share a Github repo. Build tools: ejected CRA with Webpack 5. We use Jest v29.5.0
from reselect.
Not sure what to tell you without some kind of reproduction to look at, other than to try logging reselect
and createSelector
in that file and see what's actually being imported. It's definitely some kind of a module loading / import issue.
from reselect.
So I get reselect.cjs
when I console.log reselect
and I get undefined
when i console.log reselect.createSelector
from reselect.
as in, you're getting a string of "reselect.cjs"
?
If so, yeah, that's 100% broken. I would expect it to either be an object, or undefined.
I still don't have an answer for why this is happening - I'd need to see a repro to be able to investigate what's going on.
To be clear, this sounds like it's an issue with Jest and loading the module, specifically.
from reselect.
Yeah getting a string of reselect.cjs
. This is how 5.1.0 looks like in node_modules
This is how 4.1.8 looks like in node_modules
from reselect.
Yeah, both of those are expected - we changed the packaging setup for Reselect 5, and we tested it pretty thoroughly against a variety of build tools.
All I can say atm is that apparently something is causing Jest to drastically misinterpret the library, but I don't know what. If you can provide a repo that demonstrates this happening, I can take a look, but without that I can't do anything.
Like, does this happen in a brand new repo with Jest 19 + Reselect? Does this only happen in your repo? Do you have a Jest config that's doing a bunch of complex setup, or is it basic Jest out of the box?
from reselect.
can you share what your jest.config.js
looks like?
from reselect.
Here you go @aryaemami59
import fs from "fs"
import type {Config} from "@jest/types"
import {projects} from "./tools/jest/project-definitions"
type ArrayElement<A> = A extends readonly (infer T)[] ? T : never
type SingleJestProjectType = Exclude<ArrayElement<Config.InitialOptions["projects"]>, string>
const genReactAppJestConfig = (
_pkg: Record<string, any>,
projectPath: string,
srcDir: string,
): SingleJestProjectType => {
const setupFiles = [fs.existsSync(`${projectPath}/setupTests.ts`) && `${projectPath}/setupTests.ts`].filter(
Boolean,
) as string[]
const setupFilesAfterEnv = [
fs.existsSync(`${projectPath}/setupTestsAfterEnv.ts`) && `${projectPath}/setupTestsAfterEnv.ts`,
].filter(Boolean) as string[]
return {
rootDir: `${projectPath}${srcDir}`,
roots: [`${projectPath}${srcDir}`],
setupFiles,
setupFilesAfterEnv,
moduleNameMapper: {
"@mockData/(.*)": `${projectPath}/__mocks__/$1`,
"^@app/(.*)$": `<rootDir>/$1`,
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
"\\.(css|less|sass|scss)$": path.resolve(__dirname, "./config/jest/cssMock.js"),
"@next/core-logger": "@next/core-logger/lib/client",
"^@manifest/constants$": `<rootDir>/templating/constants`,
},
moduleFileExtensions: ["web.js", "js", "web.ts", "ts", "web.tsx", "tsx", "json", "web.jsx", "jsx", "node"],
modulePaths: [],
testEnvironment: "jsdom",
testMatch: [`<rootDir>/**/__tests__/**/*.{js,jsx,ts,tsx}`, `<rootDir>/**/*.{spec,test}.{js,jsx,ts,tsx}`],
// TODO: 52076 - Refactor transform ignore patterns
transformIgnorePatterns: [
"/node_modules/(?!launchdarkly-node-server-sdk|applicationinsights)/",
"\\.pnp\\.[^\\/]+$",
],
transform: {
"\\.[jt]sx?$": [
"babel-jest",
{
rootMode: "upward",
},
],
"^.+\\.css$": path.resolve(__dirname, `./config/jest/cssTransform.js`),
"^(?!.*\\.(css|json)$)": path.resolve(__dirname, `./config/jest/fileTransform.js`),
},
snapshotSerializers: ["@emotion/jest/serializer"],
}
}
const config = async (relativePathToRoot = "."): Promise<Config.InitialOptions> => {
return {
collectCoverage: true,
collectCoverageFrom: [
"**/*.{ts,tsx}",
"!**/*.cy.{ts,tsx}",
"!**/*.stories.{ts,tsx}",
"!**/*.d.ts",
"!**/templating/manifest.ts",
"!**/cypress/**",
"!**/components/plp/categoryPills/*.{ts,tsx}", // Excluded for coverage (POC)
"!**/components/plp/tabScrollNavigation/*.{ts,tsx}", // Excluded for coverage (POC)
],
coverageReporters: ["json-summary", "lcov", "text"],
watchPlugins: ["jest-watch-typeahead/filename", "jest-watch-typeahead/testname"],
projects: await Promise.all(
projects
.map(project => ({
...project,
projectDir: path.resolve(project.rootDir.replace("./", `${relativePathToRoot}/`)),
}))
.filter(project => fs.existsSync(`${project.projectDir}/package.json`))
.map(async project => {
const pkg = await import(`${project.projectDir}/package.json`)
return {
displayName: pkg.name,
...(genReactAppJestConfig(
pkg,
path.resolve(project.rootDir.replace("./", `${relativePathToRoot}/`)),
project.srcDir ?? "/src",
) as Record<string, any>),
}
})
.filter(Boolean),
),
}
}
export default config
from reselect.
Okay, I don't know what about that config is an issue, but given that you do have a large complex custom Jest config, I would strongly suspect the issue is in that config somewhere.
from reselect.
Read up on jest configs and I have found we use a fileTransform.js
that stringifies imports and that was the issue
from reselect.
Yep, that's roughly what I assumed to be happening. Glad you got that figured out!
from reselect.
Related Issues (20)
- How to type redux state and selectors with readonly? HOT 3
- Consider dev mode checks for `x => x` result functions HOT 2
- More Reselect addons to investigate HOT 1
- Add identifiable information to dev mode check log messages HOT 3
- Documentation ignores links in the table of contents entries HOT 1
- Type loss in `createSelector` with inline function declarations passed as separate arguments
- lastResult.deref is not a function (it is undefined) HOT 6
- Better call stack for selector warnings HOT 11
- Unable to use `resultEqualityCheck` with `weakMapMemoize` HOT 3
- Incorrect weakMapMemoize alternative example using useCallback HOT 1
- using createSelector.withTypes prevents build HOT 7
- Question: Why can't we support `createAsyncSelector`? HOT 11
- `weakMapMemoize` with `resultEqualityCheck` is provided empty objects for first call. HOT 3
- Library do not work in Safari < 14.1 HOT 1
- Why the LRUCache implementation is using Array over the Doubly Linked List with Map? HOT 8
- Question: should OutputSelector be used as an InputSelector? HOT 3
- Current documentration loose article about passing parameters HOT 1
- First level of cascading memoization is broken when more props are passed HOT 4
- [Documentation/Support] using mapping the result of a selector with another selector. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reselect.