Mock out CSS files for jest runner #13315

sorenlouv · 2017-08-03T14:01:45Z

Static assets should like css-files should be mocked out, so Jest doesn't interpret them as javascript.

Related Jest documentation: https://facebook.github.io/jest/docs/webpack.html#handling-static-assets

cjcenizal

Just one suggestion and one minor nitpick about file naming!

cjcenizal · 2017-08-03T15:00:41Z

src/jest/config.json

@@ -13,7 +13,8 @@
    "!ui_framework/components/**/*/index.js"
  ],
  "moduleNameMapper": {
-    "^ui_framework/components": "<rootDir>/ui_framework/components"
+    "^ui_framework/components": "<rootDir>/ui_framework/components",
+    "\\.(css|less|scss)$": "<rootDir>/src/jest/mockCssFiles.js"


Want to borrow something similar from https://github.com/elastic/kibana/pull/13172/files#diff-68998b8839f75d151a840687485895a5R16?

"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/ui_framework/src/test/file_mock.js"

It encompasses more files, which will be useful once we introduce SVGs (and I guess MP3s?) 😄

Once we have a visualization for audio waveforms ;)

I am of the opinion that we should add extensions as they become necessary.

Any particular reason @tylersmalley?

"Start simple" would be my reason. If this list was to exactly match the webpack loader list I would expect it to be referenced in a DRY fashion.

Sure, we can start simple and add as time goes on. I'm just not sure I see a problem with having a comprehensive list up front. These files will never actually be useful within a Jest test, right? So adding them all now will solve all problems we'll encounter with them, for everyone, forever.

On the other hand, if we kept this list simple to start with, then everyone who adds a new static file will go through the same painful process (which I went through):

They'll get an obscure webpack error about a missing loader

Do a Google search for 20 mins

Figure out it's a problem with static files

Probably end up just pasting in the comprehensive list of static files, since it's the recommendation on the Jest website (see link in PR description)

All of that, for what gain?

The Jest docs seem to suggests to make separate mocks for styles than other static assets:

{ "moduleNameMapper": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js", "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js" } }

This might be a good idea since with styles we don't care about the returned value:

import 'mystyles.css'

whereas with images (and other static assets) we do:

import cat from 'cat.gif'

I can add the mocks for styles and assets in general, or just add the mock for the styles. Up to you.

cjcenizal · 2017-08-03T15:01:45Z

src/jest/mockCssFiles.js

@@ -0,0 +1 @@
+module.exports = {};


The name of this file should be snake_cased, right?

If that's the convention I'll rename :)

sorenlouv · 2017-08-07T13:52:38Z

@cjcenizal @tylersmalley I've fixed the feedback. I've added the static file types as a seperate commit. Let me know if I should remove that again, or if you want it to stay.

cjcenizal

Looks good to me! Thanks for doing this!

…13479) * Rename tasks to createComponent and documentComponent. * Reference correct src paths in README. * Add children and className to templates' propTypes. * Add default folder name for page demo. * Add suffix to sandbox routes. * Specify testPathIgnorePatterns more clearly. * Rename component.test.js to test.js so that Jenkins won't try to run it. * Update npm scripts to depend on local yo dependency, not global. * Add ui_framework/src to copy task. * Simplify npm scripts and remove requirement for installing Yeoman from README. * Mock out static files when running in Jest (#13315) * Add services to moduleNameMapper in jest config.

…lastic#13479) * Rename tasks to createComponent and documentComponent. * Reference correct src paths in README. * Add children and className to templates' propTypes. * Add default folder name for page demo. * Add suffix to sandbox routes. * Specify testPathIgnorePatterns more clearly. * Rename component.test.js to test.js so that Jenkins won't try to run it. * Update npm scripts to depend on local yo dependency, not global. * Add ui_framework/src to copy task. * Simplify npm scripts and remove requirement for installing Yeoman from README. * Mock out static files when running in Jest (elastic#13315) * Add services to moduleNameMapper in jest config.

…13479) * Rename tasks to createComponent and documentComponent. * Reference correct src paths in README. * Add children and className to templates' propTypes. * Add default folder name for page demo. * Add suffix to sandbox routes. * Specify testPathIgnorePatterns more clearly. * Rename component.test.js to test.js so that Jenkins won't try to run it. * Update npm scripts to depend on local yo dependency, not global. * Add ui_framework/src to copy task. * Simplify npm scripts and remove requirement for installing Yeoman from README. * Mock out static files when running in Jest (#13315) * Add services to moduleNameMapper in jest config.

sorenlouv requested a review from weltenwort August 3, 2017 14:01

weltenwort requested a review from cjcenizal August 3, 2017 14:34

cjcenizal suggested changes Aug 3, 2017

View reviewed changes

cjcenizal added the Team:Core Core services & architecture: plugins, logging, config, saved objects, http, ES client, i18n, etc label Aug 3, 2017

Mock out CSS files for jest runner

72331f4

sorenlouv force-pushed the jest-mock-out-css-files branch from 177b8da to 72331f4 Compare August 4, 2017 08:02

Add file mock for all static assets

ca610fe

weltenwort approved these changes Aug 7, 2017

View reviewed changes

cjcenizal approved these changes Aug 7, 2017

View reviewed changes

sorenlouv merged commit 8cfbb82 into elastic:master Aug 7, 2017

sorenlouv deleted the jest-mock-out-css-files branch August 7, 2017 15:36

cjcenizal added v6.1.0 v7.0.0 labels Aug 7, 2017

cjcenizal pushed a commit to cjcenizal/kibana that referenced this pull request Aug 7, 2017

Mock out static files when running in Jest (elastic#13315)

9e51da4

cjcenizal mentioned this pull request Aug 7, 2017

[6.x] Mock out static files when running in Jest (#13315) #13367

Merged

cjcenizal added a commit that referenced this pull request Aug 7, 2017

Mock out static files when running in Jest (#13315) (#13367)

ff66d71

cjcenizal pushed a commit to cjcenizal/kibana that referenced this pull request Aug 11, 2017

Mock out static files when running in Jest (elastic#13315)

997abb7

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mock out CSS files for jest runner #13315

Mock out CSS files for jest runner #13315

sorenlouv commented Aug 3, 2017

cjcenizal left a comment

cjcenizal Aug 3, 2017

weltenwort Aug 3, 2017

tylersmalley Aug 3, 2017

cjcenizal Aug 3, 2017

weltenwort Aug 3, 2017

cjcenizal Aug 3, 2017

sorenlouv Aug 3, 2017 •

edited

Loading

cjcenizal Aug 3, 2017

sorenlouv Aug 3, 2017

sorenlouv commented Aug 7, 2017 •

edited

Loading

cjcenizal left a comment

Mock out CSS files for jest runner #13315

Mock out CSS files for jest runner #13315

Conversation

sorenlouv commented Aug 3, 2017

cjcenizal left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sorenlouv Aug 3, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sorenlouv commented Aug 7, 2017 • edited Loading

cjcenizal left a comment

Choose a reason for hiding this comment

sorenlouv Aug 3, 2017 •

edited

Loading

sorenlouv commented Aug 7, 2017 •

edited

Loading