2

We are using create-react-app to build our declarative framework. In this framework, we author a json file which gets loaded into a react-component by webpack. We have authored specific loader for that. This works well in the browser. But facing issues with unit testing. Create-react-app uses Jest for unit testing. What I want to acheive is transform these json files in js or react component, but hitting following limitations

  1. If I add custom transform for json, then it does not work due to restriction put up by jest-runtime. Post transformation, it expects the output to be json only. See Jest-runtime code which restricts

enter image description here

  1. If I rename file extensions to '.vm' then it never picks up my transformer as create-react-app add fileTransformer in following cases. The highlighted transformer gets picked up for all other types mentioned in that regex.

enter image description here

Need your guidance to resolve this issue.

skyboyer
  • 22,209
  • 7
  • 57
  • 64
Prasad Sawant
  • 221
  • 4
  • 10
  • The reason it expects the output to be json is because it makes mocking json files super simple ``data.json and __mock__/data.json`` https://github.com/facebook/jest/pull/8278#issuecomment-496316634 – Amit Jul 22 '20 at 11:31
  • Ideally your option 2 should work, if you override the transform object. could you share your package.json's jest object (https://create-react-app.dev/docs/running-tests/#configuration) – Amit Jul 22 '20 at 11:38
  • Have you gone through this: https://github.com/facebook/jest/issues/2578 – Asutosh Jul 23 '20 at 11:43

1 Answers1

0

Webpack Docs: https://webpack.js.org/loaders/json5-loader/ The Config for conversion of JSON to JS would look something like this. Then you could pass it into Jest rather than have Jest try to convert it during runtime.

module.exports = {
  module: {
    rules: [
      {
        test: /\.json5$/i,
        loader: 'json5-loader',
        type: 'javascript/auto',
      },
    ],
  },
};
Jacob
  • 586
  • 6
  • 27