Reloading React component tests using webpack-dev-server
Unit testing a React component using Webpack and Jasmine, can involve slow and repetitive tasks when confirming that tests are passing when your code changes. For example, manually running commands instructing webpack to compile code plus refreshing the browser. This lesson demonstrates how to speed up your development time by automating these tasks using webpack-dev-server.
[00:00] In this lesson we're going to start with the React component that we're going to be testing using Jasmine. We're going to compile the code using Webpack and we're going to actually demonstrate...If we make any changes to the spec or to the code, we then have to go back into Webpack, recompile the code, and once the code is actually recompiled, we have to go back to the browser, refresh the browser, and determine whether our test passes or fails.
[00:22] Obviously, this is a cumbersome process, quite slow, but one that we can overcome and I'll demonstrate that in this lesson by using the Webpack dev server. Let's install it using MPM and then once it's installed we can then run it from within our node modules.bin directory.
[00:38] We run it from there because we installed it locally and not globally. This will run under local host port 8080/webpack-dev-server. We test at the end because that's what we defined in our public path within the Webpack configuration.
[00:54] We're expecting Webpack dev server to reload once we made any code changes. If we go into our spec and change run the jewels to run the jewel, we would expect the test to fail, which it has.
[01:05] If you look here, the artist named Run the Jewel was expected to match the artist named Run the Jewels. Now if we go back to our spec and revert that change and go back to Run the Jewels, we should expect, automatically, for Webpack to reload the tests and the tests should pass.
[01:22] Now, it's quite a lot of typing, just to get Webpack dev server up and running. We can make it a little less work for our fingers and make use of the MPM run command. What you can do is essentially provide a command to your script object and then using MPM run, run that command.
[01:37] You can also supply arguments to our command, but for us we simply need Webpack dev server to be run. MPM run adds the node_modules.bin directory to our paths and we don't need to worry about that prefix.
[01:49] Let's create a package.json file and add that to the root of our project. Create a script object and give it one property of test. The test value will be Webpack dev server, the command that we're expecting to be run. MPM actually provides us with a shortcut option so that we can simply run MPM test, which, as expected, runs our Webpack dev server.
[02:11] If we go back to our browser, we can see that the Webpack dev server is running our test.