Closed arelstone closed 3 months ago
Can you show me what's inside import { interpolateColors } from './interpolateColors';
? This doesn't look standard.
Can you show me what's inside
import { interpolateColors } from './interpolateColors';
? This doesn't look standard.
It's not standard, no. As mentioned I've done a copy of @shopify/react-native-skia/src/animation/functions/interpolateColors.ts
and @shopify/react-native-skia/src/animation/functions/interpolate.ts
to my own project. No changes made at all
May I ask why you did that? I'm trying to get a sense of how I can reproduce the issue.
I am actually not sure why I came to try this.... You know, sometimes when debugging you try some odd things and it end up working 🙈
Could the problem be cause by my jest or babel config?
jest.config.ts
import type { JestConfigWithTsJest } from 'ts-jest';
const TRANSFORM_IGNORE_PATTERNS_NODE_MODULES = [
'@react-native',
'react-native',
'react-native-vector-icons',
'react-native-circular-progress',
'react-native-reanimated',
'react-native-linear-gradient',
'react-native-haptic-feedback',
'mixpanel-react-native',
'newrelic-react-native-agent',
'react-native-element-dropdown',
// @see: https://github.com/Shopify/react-native-skia/issues/2517
'@shopify/react-native-skia',
];
const jestConfig: JestConfigWithTsJest = {
preset: 'react-native',
transform: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/jest.fileTransformer.js',
'^.+\\.js(x)?$': 'babel-jest',
'^.+\\.ts(x)?$': ['ts-jest', { tsconfig: 'tsconfig.spec.json' }],
},
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$',
testPathIgnorePatterns: [
'\\.snap$',
'<rootDir>/node_modules/',
'<rootDir>/build',
'<rootDir>/e2e',
'<rootDir>/__tests__/__mocks__',
],
transformIgnorePatterns: [`node_modules/(?!(${TRANSFORM_IGNORE_PATTERNS_NODE_MODULES.join('|')})/)`],
cacheDirectory: '.jest/cache',
setupFiles: [
'./node_modules/react-native-gesture-handler/jestSetup.js',
'@shopify/react-native-skia/jestSetup.js',
'./node_modules/newrelic-react-native-agent/jestSetup.js',
'<rootDir>/jest.mocks.ts',
],
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
forceExit: true,
fakeTimers: { enableGlobally: true },
globals: {
__DEV__: true,
},
};
export default jestConfig;
bable.config.js
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = function (api) {
api.cache(true);
return {
presets: ['module:@react-native/babel-preset'],
plugins: [
'@babel/plugin-transform-export-namespace-from',
'@babel/plugin-transform-optional-chaining',
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-transform-nullish-coalescing-operator',
'react-native-reanimated/plugin', // Reanimated plugin needs to be listed last!!
],
};
};
tsconfig.json
{
"extends": "@tsconfig/react-native/tsconfig.json",
"compilerOptions": {
"outDir": "build",
"types": ["node", "jest", "@testing-library/jest-native", "@testing-library/react-native"],
}
}
I think you should try to use interpolateColors from Skia directly no? We also unit test in jest so if there is a small repro it's easy for us to add in the test suite.
importing interpolateColors
from skia is what caused the problem
I check if the function is properly mocked and it is and we can even add a test for it on our side. We would need to small reproduction to reopen/fix the issue.
Description
I am not sure if this should be marked as Documentation issue or a Bug report. I grabbed the code from the documentation so i'll start it off as a documentation issue. If incorrect please change the label
Following the example of animating colors gives me an error when my tests
I have followed the steps from Testing with Jest in the documentation and have updated the
transformIgnorePatterns
andsetupFiles
Error:
React native env:
A solution?
After copying
@shopify/react-native-skia/src/animation/functions/interpolateColors.ts
and@shopify/react-native-skia/src/animation/functions/interpolate.ts
to be "side by side" with my own component jest does not report the error abovePlease Note:
Please note that jest does not report any errors when removing
@shopify/react-native-skia
from mytestPathIgnorePatterns