Unresolved variable: $PRIMARY_COLOR + Jest test

[mohammad-goldast]

Hello everyone ! I need to write TDD for my react-native projects. When i run npm test, i got an error like this issue title.

I need to know, how can i set EStyleSheet variable to jest ! SEE Full ERROR ! File : Login.test.js

    import { TextInput } from 'react-native';
    import React from 'react';
    import Login from '../../src/components/screens/Authentication/Login';
    import renderer from 'react-test-renderer';
    import * as Chai from 'chai';
    import EStyleSheet from 'react-native-extended-stylesheet';

    import { shallow, configure, at } from 'enzyme';
    import Adapter from 'enzyme-adapter-react-16';

    // Redux Store must be comment before 'npm test'

    configure({ adapter: new Adapter() });

    beforeAll(() => {
        EStyleSheet.build({ 
            $PRIMARY_COLOR: '#756BFF',
            $BG_COLOR: '#fbfbfb',
            $ERROR_COLOR: '#FF406D',

            $FIRST_FONT: 'IranYekan_Bold',
            $SECOND_FONT: 'IranYekan_Medium',
            $THIRD_FONT: 'IranYekan_Light',
        });
    })

    describe('Login snapShot', () => {
        const LoginSnapShot = renderer.create(<Login />).toJSON();
        expect(LoginSnapShot).toMatchSnapshot();
    })

    describe('Login procces', () => {
        it('It should have a Phone TextInput', () => {
            const wrapper = shallow(<Login />);
            Chai.expect(wrapper.length).to.equal(1);

            Chai.expect(wrapper.find(TextInput).at(0).simulate('ChangeText','09123456789'));
            Chai.expect(wrapper.state('phoneNumber')).to.equal('09123456789');
            Chai.expect(wrapper.state('disableStartButton')).to.equal(false);
            Chai.expect(wrapper.state('disableStartButton')).to.equal(false);

            Chai.expect(wrapper.find(TextInput).at(0).simulate('ChangeText','099999994'));
            Chai.expect(wrapper.state('disableStartButton')).to.equal(true);

        });
    });

File : Login.js

        <View style={styles.container}>
            <NavBar />
            <Card style={styles.cardStyles}>
                <View style={styles.detailsBox}>
                    <View>
                    </View>
                    <BoxShadow setting={shadowOpt}>
                        <View style={styles.inputsBox}>
                            <View>
                                <TextInput
                                    ref={(input) => { this.refer = input; }}
                                    style={styles.phoneNumberInput}
                                    value={phoneNumber.replace(/[^\d]+/g, '')}
                                    placeholder="  -  -  -  -  -  -  -  -  "
                                    underlineColorAndroid="transparent"
                                    keyboardType="phone-pad"
                                    maxLength={15}
                                    multiline={false}
                                    numberOfLines={1}
                                    allowFontScaling={false}
                                    onChangeText={(text) => this.onChangePhoneInput(text)}
                                    selectionColor={EStyleSheet.value('$PRIMARY_COLOR')}
                                    autoFocus
                                />
                            </View> 
                        </View>
                    </BoxShadow>
                    <Button
                        style={{ maxWidth: 270 }}
                        disable={disableStartButton}
                        onPress={() => this.handleStartPress()}
                        textStyleProps={{ color: disableStartButton ? '#C8C8C8' : '#ffffff' }}
                        showLoading={showLoading}
                    />
                </View>
            </Card>
            <NetChecker onCheckNet={(isConnected) => { this.isConnected = isConnected; }} />
        </View>

[vitalets]

Hi @blackhair !

It seems you mistyped describe instead of it:

    // describe('Login snapShot', () => {
    it('Login snapShot', () => {
        const LoginSnapShot = renderer.create(<Login />).toJSON();
        expect(LoginSnapShot).toMatchSnapshot();
    })

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jfishy]

can this be re-opened, currently experiencing this bug

[vitalets]

@jfishy could you show your code sample demonstrating bug?

[jfishy]

@vitalets fixed issue by including the following in my package.json file "setupFiles": [ "./testenv.js", "./assets/colors.js" ],

[jfishy]

Error was caused by calling StyleSheet.value('$primary1') in code