Writing jest snapshots?

[kirakik]

Hello,

I've been using this library for a while, but I was disappointed to find our that jest snapshots do not work with it. Is there any plan to make it compatible?

Thank you

[vitalets]

Hi @kirakik ! Could you show example of your test and what you expect?

[michalchudziak]

You need to build stylesheet before running test suites, small workaround would be:

In __mocks__/react-native-extended-stylesheet.js:

const EStyleSheet = require('react-native-extended-stylesheet').default;

EStyleSheet.build({
  /* Bootstrap styles here.*/
});

module.exports = EStyleSheet;

[geminiyellow]

hi @mike866 , i try to import this mock before running jest test, but it show

  ● Test suite failed to run

    TypeError: Cannot read property 'default' of undefined

    > 1 | const EStyleSheet = require('react-native-extended-stylesheet').default;
        |                                                                                         ^
      2 | 
      3 | EStyleSheet.build({
      4 |   /* Bootstrap styles here.*/

is there a runnable Jest example ?

[vitalets]

hi @geminiyellow !

1. did you put it in correct __mocks__ directory?
2. which version of jest are you using?

[geminiyellow]

@vitalets

1. yep, in __mocks__
2. latest

[vitalets]

A working example with Jest snapshot testing:

1. Create RN project: react-native init AwesomeProject

2. cd AwesomeProject

3. Create test in __tests__/app-test.js:

   import React from 'react';
   import App from '../App';
   
   import renderer from 'react-test-renderer';
   
   test('renders correctly', () => {
    const tree = renderer.create(<App/>).toJSON();
    expect(tree).toMatchSnapshot();
   });

4. Run test to ensure everything works on this step: jest

   PASS  __tests__/app-test.js
     ✓ renders correctly (2827ms)
   
   › 1 snapshot written.
     Snapshot Summary
    › 1 snapshot written from 1 test suite.
   
   Test Suites: 1 passed, 1 total
   Tests:       1 passed, 1 total
   Snapshots:   1 written, 1 total
   Time:        6.217s
   Ran all test suites.

5. Now add EStyleSheet to project:

   npm i react-native-extended-stylesheet --save

6. Use EStyleSheet in index.js and App.js: index.js

   import EStyleSheet from 'react-native-extended-stylesheet';
   EStyleSheet.build({
    $fontColor: '#F5FCFF',
   });

   App.js

   ...
   import EStyleSheet from 'react-native-extended-stylesheet';
   ...
   const styles = EStyleSheet.create({ // <-- use EStyleSheet instead of StyleSheet
    container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '$fontColor', // <-- EStyleSheet variable
   },
   ...

7. Build styles before test executed:

   • use beforeAll hook: app-test.js:

     ...
     import EStyleSheet from 'react-native-extended-stylesheet';
     beforeAll(() => {
       EStyleSheet.build({
         $fontColor: '#F5FCFF',
       });
     });
     ...

   • use mock: __mocks__/react-native-extended-stylesheet.js (as @mike866 suggested):

     const EStyleSheet = require('react-native-extended-stylesheet').default;
     
     EStyleSheet.build({
     /* Bootstrap styles here.*/
     });
     
     module.exports = EStyleSheet;

8. Run test again: jest. Everything should pass:

   PASS  __tests__/app-test.js
     ✓ renders correctly (172ms)
   
   Test Suites: 1 passed, 1 total
   Tests:       1 passed, 1 total
   Snapshots:   1 passed, 1 total
   Time:        1.743s, estimated 2s
   Ran all test suites.

Environment:

$ react-native -v
react-native-cli: 2.0.1
react-native: 0.55.4

$ jest -v 
23.2.0

I've added jest-testing to examples.

Feel free to reopen if after these steps jest testing does not work.

[ShrinathGupta]

Issue still persists. "jest": "23.6.0", "react-native": "0.57.5", @vitalets can you please check.

[vitalets]

Could you show more details?

[ShrinathGupta]

I am getting following error. TypeError: _reactNativeExtendedStylesheet.default.create is not a function module.exports = EStyleSheet.create( { }); I tried to do export default as well. But it didn't work.

[vitalets]

I am getting following error. TypeError: _reactNativeExtendedStylesheet.default.create is not a function module.exports = EStyleSheet.create( { }); I tried to do export default as well. But it didn't work.

This is something due to ES modules import. Could you show how you import/require EStyleSheet?

[ShrinathGupta]

Resolved, it was related to module export. Thanks @vitalets

[KPS250]

@ShrinathGupta how did you solve this? Facing the same issue

[sourabhAfunky]

@ShrinathGupta could you provide the solution?

[vishrut]

Adding the the package name to transformIgnorePatterns in the jest config fixes the module import related issue.

transformIgnorePatterns: [
    'node_modules/(?!(@react-native|react-native|<...OTHER PACKAGES>|react-native-extended-stylesheet)/)',
  ]