1

I am new to writing test cases in React. I am using jest and enzyme to write test cases. As I tried to commit my code with test-cases, I got a question that the browser only renders html, css, js does it load test cases with other code. Sorry for posting this kind of question please help me in understanding how browser renders a react application.

jckmlczk
  • 359
  • 4
  • 11
Pavan Kusunuri
  • 327
  • 5
  • 20
  • 2
    No, it won't get any test code. Test code is eliminated when you run 'npm run build'. The transpiler(babel) will transpile your jsx, html, css code into one bundle.js and one index.html file. And only those two files are getting compiled at browser. To understand how react app is working, run npm run build in your terminal and explore the newly created dist folder. – Nayan shah Mar 13 '20 at 12:00
  • @Nayanshah thanks for your response, I want to know few things more clear, while in developing an application we try run our code in web browser whenever we make changes and save a file it gets reflected at web browser. Does the test files includes in bundle folder created by webpack. – Pavan Kusunuri Mar 13 '20 at 12:09
  • 1
    Generally in most of the cases, there are two webpack settings, one for local development and another for sending it to production. In both cases, we eliminate test code. So when you are running your application locally it will still not have test code. – Nayan shah Mar 17 '20 at 18:22

1 Answers1

4

If you used create-react-app (CRA) or have a similar Webpack configuration you're working off of then the browser will not have the code you wrote for test cases. So you're safe. Long answer below:

Essentially, Webpack uses the import and export feature of es6 (called es6 modules) across all of your files to add ONLY the files you need to build your project. Webpack will import any js or css file you import (Webpack/CRA can be configured to use Typescript, SCSS, etc.). Code that tells webpack to do this looks like so:

// App.js
import { someComponent } from "./someComponent.jsx"

// someComponent.jsx
export const SomeComponent = (props) => {
  ...
}

Notice the import and export keywords. So you would have to export your tests somehow (don't do this!) for the test code to end up in the browser.

In fact, CRA now uses tree-shaking so that only the imports that are ACTUALLY used are actually imported. So if you aren't using it, webpack will ignore it.

Good job for adding tests to your code!

Bryce S
  • 1,250
  • 10
  • 12