fix(component-testing): correctly import components with css from third party libraries #1023
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
DudaGod
force-pushed
the
TESTPLANE-273.fix_import_css
branch
from
75811d8
to
bf447c3
Compare
DudaGod
commented
Oct 8, 2024
| @@ -2,10 +2,14 @@ import * as nodePath from "node:path"; | |||
| import * as babel from "@babel/core"; | |||
| import { addHook } from "pirates"; | |||
| import { TRANSFORM_EXTENSIONS, JS_EXTENSION_RE } from "./constants"; | |||
| import { requireModuleSync } from "../utils/module"; | |||
There was a problem hiding this comment.
Helper in order to be able to test require
src/bundle/test-transformer.ts
Outdated
|
|
||
| import type { NodePath, PluginObj, TransformOptions } from "@babel/core"; | ||
| import type { ImportDeclaration } from "@babel/types"; | ||
|
|
||
| const STYLE_EXTESTION_RE = /\.(css|less|scss)$/; | ||
| const IGNORE_IMPORT_ERRORS = ["Unexpected token"]; |
There was a problem hiding this comment.
When style files imported in node js environment I get an error like: Unexpected token . (when first line in css is .some-class {...} or Unexpected token { (when first line is body {...})
|
|
||
| const firstStackFrame = (err as Error).stack?.split("\n")[0] || ""; | ||
| const filePath = firstStackFrame.split(":")[0]; | ||
| const isStyleFilePath = STYLE_EXTESTION_RE.test(filePath); |
There was a problem hiding this comment.
When I get an error from import css first frame in stack looks like: /Users/.../some.css:100500.
| [".css", ".less", ".scss", ".jpg", ".png", ".woff"].forEach(extName => { | ||
| it(`asset with extension: "${extName}"`, () => { | ||
| describe("'removeNonJsImports' option", () => { | ||
| [true, false].forEach(removeNonJsImports => { |
There was a problem hiding this comment.
just move to common describe
| const error = { message: "Unexpected token {", stack: `foo${extName}:100500\nbar\nqux` }; | ||
|
|
||
| const { setupTransformHook } = proxyquire("../../../src/test-reader/test-transformer", { | ||
| "../bundle": proxyquire.noCallThru().load("../../../src/bundle/test-transformer", { |
There was a problem hiding this comment.
Here I use two proxyquire in order to correctly check the logic. Didn't find another solution.
DudaGod
force-pushed
the
TESTPLANE-273.fix_import_css
branch
from
bf447c3
to
6023993
Compare
KuznetsovRoman
approved these changes
Oct 24, 2024
…rd party libraries
DudaGod
force-pushed
the
TESTPLANE-273.fix_import_css
branch
from
6023993
to
86bdb90
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What is done
Some libraries can load css files when you import them in component test file. For example:
This file executes not only in browser, but also in nodejs environment. Where I get an error like:
Unexpected token ...when try to import it. To solve this problem we use pirates + babel, they remove unnecessary imports. But when user import some module (without file extension) we can't figure out if it needs to be ignored in node env or not.So in order to fix this problem we first require this module and if we get
Unexpected token ...error from css file then we remove it.