You're Invited: Meet the Socket team at BSidesSF and RSAC - April 27 - May 1.RSVP →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

jest-transform-css

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

jest-transform-css - npm Package Compare versions

Comparing version

1.0.0
to
1.1.0

24

index.js
const fs = require("fs");
const path = require("path");
const crypto = require("crypto");
const crossSpawn = require("cross-spawn");
const stripIndent = require("common-tags/lib/stripIndent");
const THIS_FILE = fs.readFileSync(__filename);
module.exports = {
getCacheKey: (fileData, filename, configString, { instrument, rootDir }) => {
return (
crypto
.createHash("md5")
.update(THIS_FILE)
.update("\0", "utf8")
.update(fileData)
.update("\0", "utf8")
.update(path.relative(rootDir, filename))
.update("\0", "utf8")
.update(configString)
// TODO load postcssrc (the config) sync and make it part of the cache
// key
// .update("\0", "utf8")
// .update(getPostCssConfig(filename))
.update("\0", "utf8")
.update(instrument ? "instrument" : "")
.digest("hex")
);
},
process: (src, filename, config, options) => {

@@ -7,0 +31,0 @@ // The "process" function of this Jest transform must be sync,

13

package.json
{
"name": "jest-transform-css",
"description": "Jest transfomer to import CSS into Jest's `jsdom`",
"version": "1.0.0",
"description": "Jest transformer to import CSS into Jest's `jsdom`",
"version": "1.1.0",
"main": "index.js",

@@ -11,8 +11,11 @@ "author": "Dominik Ferber <dominik.ferber+npm@gmail.com> (http://dferber.de/)",

"cross-spawn": "6.0.5",
"postcss-load-config": "2.0.0",
"postcss-modules": "1.3.2",
"style-inject": "0.3.0"
},
"devDependencies": {
"postcss": "^7.0.2"
},
"peerDependencies": {
"postcss": "^7.0.2",
"postcss-load-config": "^2.0.0",
"postcss-modules": "^1.3.2"
"postcss": "^7.0.2"
},

@@ -19,0 +22,0 @@ "keywords": [

6

README.md
# jest-transform-css
A Jest transfomer which enables importing CSS into Jest's `jsdom`.
A Jest transformer which enables importing CSS into Jest's `jsdom`.

@@ -25,3 +25,3 @@ **If you are not here for Visual Regression Testing, but just want to make your tests work with CSS Modules, then you are likley looking for https://github.com/keyanzhang/identity-obj-proxy/.**

`jest-transform-css` is inteded to be used in an `jsdom` environment. When any component imports CSS in the test environment, then the loaded CSS will get added to `jsdom` using [`style-inject`](https://github.com/egoist/style-inject) - just like the Webpack CSS loader would do in a production environment. This means the full styles are added to `jsdom`.
`jest-transform-css` is intended to be used in an `jsdom` environment. When any component imports CSS in the test environment, then the loaded CSS will get added to `jsdom` using [`style-inject`](https://github.com/egoist/style-inject) - just like the Webpack CSS loader would do in a production environment. This means the full styles are added to `jsdom`.

@@ -47,3 +47,3 @@ This doesn't make much sense at first, as `jsdom` is headless (non-visual). However, we can copy the resulting document markup ("the HTML") of `jsdom` and copy it to a [`puppeteer`](https://github.com/googlechrome/puppeteer/) instance. We can let the markup render there and take a screenshot there. The [`jsdom-screenshot`](https://github.com/dferber90/jsdom-screenshot) package does exactly this.

"^.+\\.js$": "babel-jest",
"^.+\\.css$": "./jest-transform-css"
"^.+\\.css$": "jest-transform-css"
}

@@ -50,0 +50,0 @@ ```