When talking about , people usually associate it with , this is due to the fact that Facebook has spent a lot of time ensuring Jest was a good fit for React, but it’s far from being a test framework for applications.In fact Jest can work well with any library or framework that uses (or can be compiled down to) . Jest React just React JavaScript In this series I’ll take a library and show the process I used to get Jest configured and ready to work with it.I hope that it will help be people more comfortable using Jest with other frameworks. I’ll start with because it will allow me to show different configuration options and because it has a that is a nice candidate for . Vue.js server side renderer snapshot tests Although there are already existing integrations for Vue, I’ll pretend none exist and I’ll to go through the process of trying to set up a new framework from scratch. I believe this way will be much more useful as people might have similar issues when trying to set up their own framework. We’ll use Let’s start! _webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction._github.com vuejs-templates/webpack to create our first Vue application. npm install -g vue-clivue init webpack vue-jest We get asked some questions, we’ll say yes to bootstrap the proposed unit tests that uses karma and mocha, this way we can use the community conventions for unit tests.Since Jest is not an e2e test framework we can skip the NightWatch part. The first step now is to add Jest, to do this we’ll just type yarn add -D jest Note : Although I use Yarn in this tutorial, you can use npm. I use yarn because I have most of those dependencies locally cached, making the experience much faster for me. Now we’ll change the test script in the to run Jest package.json This way we can just run yarn test to start Jest; that’s exactly what we’ll going to do next: As expected Jest is not working out of the box, the error hints that a module cannot be found, by looking at the test in question we can see that there’s an statement, but that the path that is pointing to is not actually under the folder and so it cannot be found. specs Jest provides a module mapper option, that allows us to fix this. If we look at the project’s webpack configuration, we can see this: based on that we can add a configuration to the root: jest/moduleNameMapper package.json After saving and re-running Jest we’ll now be presented with a new error: If we look at the file is pretty clear what’s going on here: our JS is trying to require an HTML file, and that of course doesn’t work out of the box. src/components/Hello.vue What we need to do to make this work, is instruct Jest to preprocess the file to return a JS object that will work for both us and Vue. Jest offers a transform option that can map multiple regular expression patterns to different processors, so let’s add one for . files: vue We need to create a file that will handle the transformation: jest/jest-vue.js Passing Jest the option (transforms get cached otherwise) will now move us the next error which is very similar to the previous one: — no-cache This is because the import statement is not recognized by node, all we need to fix this is adding a second transform that will process the file using babel-jest: Ok. time to run again: Good, this error is because the expectation is not in the Jest format. Fixing this is as easy as changing notice the here… .to.equal to …and the here. .toBe In this case it was quite easy as there is only a single expectation, but if you are going to migrate an existing test suite you might want to look at to bulk process all of your files. https://www.npmjs.com/package/jest-codemods Let’s run again and: Yay! We got Jest configured and ready to rumble, let’s now make a Jest snapshot, shall we? To do this I’ll use the , let’s run: vue-server-renderer yarn add -D vue-server-renderer And add a snapshot test: It works, but let’s take a look of our snapshot: it works, but… everything is on a single line… I think we can do better, can’t we? When implementing snapshots I’ve always wanted it to be extensible and that’s why the pretty-printer we are using has a plugin system. Jest also very conveniently has a configuration option that we’ll use here, but before that we need to install an html “prettifier”: snapshotSerializers yarn add -D js-beautify We can now add the snapshot serializer configuration to the section in the : jest package.json and create this : jest/htmlSnapshotBeautifier.js Jest’s snapshot serializers must be objects with a and a function: instructs the plugin to be activated or not for a given a node, while returns the prettified value. test print test print Now, after running again, we get: yarn test Jest remembers the previous snapshot and is telling us that the result has changed, looks good so let’s save this new one by passing the flag and then we can check the resulting file again: -u This is much better! This ends the first post in this series, I hope people will find it useful to understand how easy is to use Jest with libraries other than React and that they get inspired to start using Jest in their projects.
