Storybook: Storyshots Unexpected character on test run.

[danbruegge]

I got this failing test for my Storyshots:

 FAIL  src/components/Storyshots.test.js
  ● Test suite failed to run

    /home/dan/.../src/fonts/FiraSans-Light.woff2: Unexpected character '' (1:8)
      > 1 | wOF2OTTOa�                                                                                                                                                                         
                      z�aR3�                                                                                                                                                                   
          |         ^                                                                                                                                                                          
        2 | ��M���z��`�X6$�N�0 [�y՝��L���a�O�                                                                                                                                                  
                                            v                                                                                                                                                  
                                             �m�8(Q�_s�Td��oi�#d                                                                                                                               
                                                                6C�$�j�vG                                                                                                                      
                                                                         ��D���a�����9f�-�+�^{>������������������������g�e8+   %�RZ�ubwۉ�NT^݀b_FS�|��a�"4��@Py���,���C�����R�@�VsM�a�juh       h�6j�S��к���U�H�gW��    5��%���                                                                                                                                                                 
                               8��l���M)5F)U$��d�5�8����"��L��94��ꙝә�z��kޒ��,ЃQG-BՈ3�4{�K��,o����QXC���Zl�P                                                                                    
            L1h���R�                                                                                                                                                                           
        3 | �r                                                                                                                                                                                 
        4 | �t�Ԇers\Q[�Pg؆�B���A��a���F�a��j    �                                                                                                                                              

  console.info node_modules/@storybook/react/dist/server/babel_config.js:73
    => Loading custom .babelrc

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.35s
Ran all test suites related to changed files.
----------|----------|----------|----------|----------|----------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
----------|----------|----------|----------|----------|----------------|
All files |  Unknown |  Unknown |  Unknown |  Unknown |                |
----------|----------|----------|----------|----------|----------------|

Watch Usage: Press w to show more.

storybook/webpack.config.babel.js

export default {
    module: {
        rules: [
            {
                exclude: /(node_modules|public)/,
                test: /\.(js|jsx)$/,
                use: 'babel-loader',
            },
            {
                exclude: /(node_modules|public)/,
                test: /\.(eot|ttf|woff|woff2)$/,
                use: 'file-loader?name=fonts/[name].[ext]',
            },
            {
                exclude: /(node_modules|public)/,
                test: /\.(svg|png)$/,
                use: 'file-loader?name=images/[name].[ext]',
            },

        ],
    },
};

.babelrc

{
    "presets": [ "env", "react" ],
    "plugins": [
        ["babel-plugin-module-resolver", {
            "alias": {
                "app": "./src"
            }
        }],
        "transform-object-rest-spread",
        "transform-export-extensions",
        "transform-class-properties",
        [ "transform-runtime", { "polyfill": false, "regenerator": true } ],
        "babel-plugin-styled-components"
    ]
}

.storybook/config.js

import React from 'react';
import { injectGlobal, ThemeProvider } from 'styled-components';
import { configure, addDecorator } from '@storybook/react';

import Theme from 'app/components/Core/Theme';

const req = require.context('../src/components', true, /\.stories\.jsx$/);

function loadStories() {
    req.keys().forEach((filename) => req(filename));
}

addDecorator((story) => <Theme>{story()}</Theme>)

configure(loadStories, module);

components/Theme

import React from 'react';
import { injectGlobal, ThemeProvider } from 'styled-components';

import fonts from 'app/fonts';
import THEME from 'app/config/theme';

injectGlobal`
    ${fonts}

    html,
    body {
        font-size: 16px;
        font-family: 'Fira Sans', sans-serif;
        color: rgba(0, 0, 0, 0.8);
    }

    body {
        margin: 0;
        padding: 0;
    }
`;

export default ({ children }) => (
    <ThemeProvider theme={THEME}>
        {children}
    </ThemeProvider>
);

fonts

import FiraSansLight from './FiraSans-Light.woff2';
import FiraSansRegular from './FiraSans-Regular.woff2';

export default `
    @font-face {
        font-family: 'Fira Sans Light';
        src: url('${FiraSansLight}') format('woff2');
        font-weight: 300;
        font-style: normal;
    }

    @font-face {
        font-family: 'Fira Sans';
        src: url('${FiraSansRegular}') format('woff2');
        font-weight: 400;
        font-style: normal;
    }
`;

Storybook is working fine. Only storyshots is giving me this error. Any idea?

[danbruegge]

Looks like storyshots is ignoring original and custom webpack config.

It does not change something when removing file-loader for fonts.

    {
        exclude: /(node_modules|public)/,
        test: /\.(svg|png)$/,
        use: 'file-loader?name=images/[name].[ext]',
    },

[danbruegge]

Looks like, i had to mock fonts and images in jest config.

    "moduleNameMapper": {
        "\\.(svg|woff2)$": "<rootDir>/src/__mocks__/fileMock.js"
    },

and fileMock.js

module.exports = 'test-file-stub';