Passing different config is not detected while running Jest snapshot test

[aymkin]

Description

Passing differenct config to the GluestackUIProviders does not result to a proper snapshot

This issue can be related too: #1450

CodeSandbox/Snack link

No response

Steps to reproduce

1. Install GluestackUI
2. Eject 'npx gluestack-ui-scripts eject-theme'
3. In config folder create two files firstBrandColors and secondBrandColors

// firstBrandColors.ts
export const brandColors = {
  primary0: '#d0ffea',
  primary50: '#c2f5db',
  primary100: '#a4ecc7',
  primary200: '#87e1b3',
  primary300: '#6dd39e',
  primary400: '#4fcb8b',
  primary500: '#44bd7e',
  primary600: '#44a673',
  primary700: '#438f68',
  primary800: '#41795c',
  primary900: '#3e6551',
  primary950: '#2f5541',

  secondary0: '#ffffff',
  secondary50: '#f5f8ff',
  secondary100: '#e6eaf7',
  secondary200: '#cad3eb',
  secondary300: '#b0bcdc',
  secondary400: '#95a5d0',
  secondary500: '#8a99c4',
  secondary600: '#808eb6',
  secondary700: '#7884a7',
  secondary800: '#717b96',
  secondary900: '#6d7382',
  secondary950: '#5d6473',
}

// secondBrandColors.ts
export const brandColors = {
  primary0: '#fceacf',
  primary50: '#ffd99f',
  primary100: '#ffc977',
  primary200: '#ffb950',
  primary300: '#ffa928',
  primary400: '#ff9900',
  primary500: '#e18907',
  primary600: '#c37a0c',
  primary700: '#a86b11',
  primary800: '#8e5d13',
  primary900: '#754e15',
  primary950: '#4d3006',

  secondary0: '#b8fcfc',
  secondary50: '#6cffff',
  secondary100: '#44ffff',
  secondary200: '#1dffff',
  secondary300: '#00f4f4',
  secondary400: '#00cccc',
  secondary500: '#05afaf',
  secondary600: '#099494',
  secondary700: '#0c7979',
  secondary800: '#0d6161',
  secondary900: '#0d4949',
  secondary950: '#043636',
}

4. in config folder create another file configs.ts

import { brandColors as firstSetPrimaryAndSecondaryColors } from './firstBrandColors'
import { brandColors as secondSetPrimaryAndSecondaryColors } from './secondBrandColors'
import { config } from './gluestack-ui.config'

export const firstConfigs = {
  ...config,
  tokens: {
    colors: {
      ...firstSetPrimaryAndSecondaryColors,
    },
  },
}

export const secondConfig = {
  ...config,
  tokens: {
    colors: {
      ...secondSetPrimaryAndSecondaryColors,
    },
  },
}

5. Create TextSamples.test.tsx

import { GluestackUIProvider, Text } from '@gluestack-ui/themed'
import React from 'react'
import renderer from 'react-test-renderer'

import { firstConfigs, secondConfig } from './configs'

const renderWithTheme = (component: React.JSX.Element) => {
  return renderer.create(
    <React.Fragment>
      <GluestackUIProvider config={firstConfigs}>{component}</GluestackUIProvider>
      <GluestackUIProvider config={secondConfig}>{component}</GluestackUIProvider>
    </React.Fragment>
  )
}

describe('TextSamples', () => {
  it(`renders correctly`, () => {
    const tree = renderWithTheme(<Text>the quick brown fox jumps over the lazy dog</Text>)
    expect(tree.toJSON()).toMatchSnapshot()
  })
})

Actual

Both snapshot have the same text color.

Excpected

To create snapshot files with two text components and each should be its own primary400 color.

gluestack-ui Version

latest at this point

Platform

• Expo
• React Native CLI
• Next
• Web
• Android
• iOS

Other Platform

No response

Additional Information

No response

[Gluant101]

Thanks for reporting the issue. We'll update you on this.