Need help with jest

Hi! When I run test I recive this error:

 FAIL  src/Button/tests/Button.test.tsx
  ● Test suite failed to run

    `css` template literal evaluated at runtime!

       6 | };
       7 |
    >  8 | const styles = css`
         |             ^
       9 |   .button{
      10 |     color: red;
      11 |

      at css (node_modules/astroturf/runtime/styled.js:98:9)
      at Object.<anonymous> (src/Button/Button.tsx:8:13)
      at Object.<anonymous> (src/Button/tests/Button.test.tsx:3:1)

I think I need to configure transform prop in jest config or modify babel config with test env, but I don’t know exactly how. Any ideas?

[ivancuric]

For using astroturf with jest, I suggest mocking the module unless you are specifically trying to test the styling

You add a __mocks__/astroturf.js to jest rootDir and it will automatically mock out the astroturf package.

// __mocks__/astroturf.js

const styled = (Component) => () => (props) => <Component {...props} />

export const css = () => {}

export default styled

You can leave off the styled version and use the babel plugin as well if you do want to run the transforms in your tests. I’m not sure what the error your getting is about but if you can put together a quick reproduction repo i’ll be happy to take a look!

Should be export const css = () => ({});

[dreyks]

you’re reading my mind 😄 inline option was the first thing i thought of but then backed off so as not to drag css-handling into the mix

i think this might be a good candidate for astroturf-jest transform though