search

kriasoft / isomorphic-style-loader

CSS style loader for Webpack that is optimized for isomorphic (universal) web apps.
https://reactstarter.com
MIT License
1.27k stars 143 forks source link

How to make snapshot testing of withStyles #115

Open telored opened 6 years ago

telored commented 6 years ago

when i try to make snapshot testing of some component that uses withStyles i get the following error:

TypeError: Cannot read property 'apply' of undefined

  at WithStyles.componentWillMount (node_modules/isomorphic-style-loader/lib/withStyles.js:71:64)
  at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:345:23
  at measureLifeCyclePerf (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:73:12)
  at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:344:9)
  at ReactCompositeComponentWrapper.mountComponent (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:255:21)
  at Object.mountComponent (node_modules/react-test-renderer/lib/ReactReconciler.js:43:35)
  at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:368:34)
  at ReactCompositeComponentWrapper.mountComponent (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:255:21)
  at Object.mountComponent (node_modules/react-test-renderer/lib/ReactReconciler.js:43:35)
  at mountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:53:31)
  at ReactTestReconcileTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:141:20)
  at batchedMountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:67:27)
  at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:141:20)
  at Object.batchedUpdates (node_modules/react-test-renderer/lib/ReactDefaultBatchingStrategy.js:60:26)
  at Object.batchedUpdates (node_modules/react-test-renderer/lib/ReactUpdates.js:95:27)
  at Object.render [as create] (node_modules/react-test-renderer/lib/ReactTestMount.js:126:18)
  at Object.it (src/routes/error/ErrorPage.test.js:11:37)
      at new Promise (<anonymous>)
  at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
      at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:188:7)

my test file:

import React from 'react'; import renderer from 'react-test-renderer'; import Page from './Page';

describe('Pruebas ', () => { it('Snapshot test', () => { const tree = renderer.create( , ); expect(tree).toMatchSnapshot(); }); });

frenzzy commented 6 years ago

You may create a TestProvider which may render styles to include them into snapshot too.

maksimgm commented 5 years ago

@telored , I was able to resolve this. Here are the steps to fix this:

Follow the steps described in this article: https://medium.com/@m.izadmehr/react-starter-kit-testing-isomorphic-style-loader-with-jest-and-enzyme-fd361b0591f0

Basiclly, you'll need to create a mock folder inside of your tools directory, which will contain a withStyles.js . Next in your jest.config.js change your moduleNameMapper to:

moduleNameMapper: { '\.(css|less|sass|scss)$': 'identity-obj-proxy', 'isomorphic-style-loader/lib/withStyles': '/tools/mocks/withStyles.js', }, Hope this helps :)