Parcel: 🙋 work with test framework like jest

[vincent178]

Thanks for the great project!

I'd like to ask that how this project works with a test framework like jest?

Can you provide an example for this?

Thanks

[bickmista]

Install babel-jest from npm and it will read your .babelrc file. No need to run it through parcel ☺️

[vincent178]

@bickmista thanks for your reply.

When we're talking about the react project with parcel, I don't think it would work only with babel-jest, and in the meantime, the parcel already works for the bundle all the assets, can we leverage this ability for test purpose, and avoid to configure separately for test.

[bickmista]

@vincent178 No problem.

Looking at the Jest docs it looks like they offer limited help when integrating with webpack and for the most part it looks like it just wants to mock things, But for assets it looks like they recommend mocking them rather than processing them. See here for more information: https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets.

Hope that helps / Sorry if i haven't quite understood your question

[vincent178]

Sorry for the unclear question.

I have tested for integrating jest using parcel as the bundle solution, the jest provide a util to preprocess all the files before it run the tests, for example, ts integrate with jest (https://github.com/facebook/jest/tree/master/examples/typescript). In this preprocess case, it requires the preprocess to be run synchronously. While it looks like parcel only provide an async way to bundle/transform assets.

Do you think we can provide an synchronous api to transform all the assets?

Thanks.

[papaponmx]

I think I'll be moving to rollup. But pls let me know if you find a way to make them play nice

[kylemh]

As another use-case:

I'd like to use modern JavaScript inside my test files (such as import) for a simple node script on a take-home assignment. React isn't involved here and I didn't need a .babelrc - default Parcel was enough.

How can I get Jest to consume its files using Parcel-transpiled code?

[JRJurman]

Not sure if people are still having issues with this, but after a couple of hours of tinkering around, I was able to get a package.json that ran with both parcel and jest as expect. I'm putting this here for anybody else who might also want such a configuration:

{
  "scripts": {
    "start": "parcel index.html --open",
    "build": "parcel build index.html",
    "test": "jest --watch"
  },
  "dependencies": {
    "@babel/core": "7.2.0",
    "@babel/preset-env": "^7.4.5",
    "babel-jest": "^24.8.0",
    "jest": "^24.8.0",
    "jest-transform-stub": "^2.0.0",
    "parcel-bundler": "^1.6.1",
    "sass": "^1.20.1"
  },
  "babel": {
    "presets": ["@babel/preset-env"]
  },
  "jest": {
    "transform": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
      "^.+\\.js$": "babel-jest"
    }
  }
}

These configurations worked for a vanilla JS project that was using import and export syntax, and scss imports. If you are using .jsx or .ts, you may need to change the jest transform to process those files for babel-jest (if it can process it, which I believe it can). The jest-transform-stub basically tells jest to ignore css imports, which is more-or-less what you want to have happen for unit tests, so this functionality it ideal.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

[Taxi4you]

Yes but it doesn't work when working with absolute paths..