Skip to content

Commit

Permalink
fix: Sass partials imports from node_modules
Browse files Browse the repository at this point in the history
Sass supports importing partials with or without the leading underscore:
https://sass-lang.com/documentation/at-rules/import#partials

Because `applyModuleNameMapper()` uses `require.resolve()` to employ
node module resolution on a bare import, it throws an exception if the
import elides the leading `_` from the basename.
  • Loading branch information
vvanpo committed Jul 27, 2020
1 parent d207d06 commit 22122c4
Show file tree
Hide file tree
Showing 5 changed files with 55 additions and 13 deletions.
1 change: 1 addition & 0 deletions e2e/__projects__/style/components/Scss.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

<style lang="scss" module>
@import '~__styles/scss-a';
@import '~vue-jest-test/partial.scss';
.c {
background-color: $primary-color;
Expand Down
5 changes: 2 additions & 3 deletions e2e/__projects__/style/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"license": "MIT",
"private": true,
"scripts": {
"test": "jest --no-cache test.js"
"test": "node setup.js && jest --no-cache test.js"
},
"dependencies": {
"vue": "^2.5.21",
Expand All @@ -17,8 +17,7 @@
"@vue/test-utils": "^1.0.0-beta.28",
"jest": "^24.0.0",
"postcss": "^7.0.13",
"sass": "^1.23.7",
"vue-jest": "file:../../../"
"sass": "^1.23.7"
},
"jest": {
"moduleFileExtensions": [
Expand Down
9 changes: 9 additions & 0 deletions e2e/__projects__/style/setup.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
const fs = require('fs')

const testDir = 'node_modules/vue-jest-test'

if (!fs.existsSync(testDir)) {
fs.mkdirSync(testDir)
}

fs.openSync(`${testDir}/_partial.scss`, 'w')
43 changes: 34 additions & 9 deletions e2e/test-runner.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@ const fs = require('fs-extra')
const chalk = require('chalk')

const IGNORE_FILES = ['.DS_Store']
const cwd = process.cwd()

// Can be run as `yarn test:e2e --cache` to forego reinstalling node_modules, or
// `yarn test:e2e <projects dir>`, or `yarn test:e2e --cache <projects dir>`.
const args = process.argv.slice(2)

function success(msg) {
console.info(chalk.green('\n[vue-jest]: ' + msg + '\n'))
Expand Down Expand Up @@ -31,29 +36,49 @@ function runTest(dir) {

const log = msg => info(`(${dir}) ${msg}`)

log('Running tests')
if (!args.filter(arg => arg === '--cache').length) {
log('Removing node_modules')
fs.removeSync(`${resolvedPath}/node_modules`)

log('Removing node_modules')
fs.removeSync(`${resolvedPath}/node_modules`)
log('Removing package-lock.json')
fs.removeSync(`${resolvedPath}/package-lock.json`)

log('Removing package-lock.json')
fs.removeSync(`${resolvedPath}/package-lock.json`)
log('Installing node_modules')
run('npm install --silent')
}

log('Installing node_modules')
run('npm install --silent')
// For tests that need vue-jest to successfully `require.resolve()` a file in
// the project directory's node_modules, we can't symlink vue-jest from a
// parent directory (as node module resolution walks up the file tree,
// starting from the realpath of the caller), we must copy it.
if (
!fs.existsSync(`${resolvedPath}/node_modules/vue-jest`) ||
!fs.lstatSync(`${resolvedPath}/node_modules/vue-jest`).isSymbolicLink()
) {
log('Copying vue-jest into node_modules')
fs.mkdirSync(`${resolvedPath}/node_modules/vue-jest`, { recursive: true })
run(`cp ${cwd}/package.json node_modules/vue-jest/`)
run(`cp -r ${cwd}/lib node_modules/vue-jest/`)
}

log('Running tests')
run('npm run test')

success(`(${dir}) Complete`)
}

async function testRunner(dir) {
async function testRunner() {
const directories = fs
.readdirSync(path.resolve(__dirname, '__projects__'))
.filter(d => !IGNORE_FILES.includes(d))

directories.forEach(runTest)
const matches = args.filter(d => directories.includes(d))

if (matches.length) {
matches.forEach(runTest)
} else {
directories.forEach(runTest)
}
}

testRunner()
10 changes: 9 additions & 1 deletion lib/module-name-mapper-helper.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,18 @@ const matchModuleImport = /^[^?]*~/
function resolve(to, importPath, fileType) {
importPath =
path.extname(importPath) === '' ? `${importPath}.${fileType}` : importPath

if (path.isAbsolute(importPath)) {
return importPath
} else if (matchModuleImport.test(importPath)) {
return require.resolve(importPath.replace(matchModuleImport, ''))
const dirname = path.dirname(importPath).replace(matchModuleImport, '')
const basename = path.basename(importPath)

try {
return require.resolve(path.join(dirname, basename))
} catch (_) {
return require.resolve(path.join(dirname, `_${basename}`))
}
}
return path.join(path.dirname(to), importPath)
}
Expand Down

0 comments on commit 22122c4

Please sign in to comment.