Testing issues as usual...

#testing #javascript

Having gone through setting up CI/CD for my schmol project, I realized that TDD is a pretty darn cool thing to have and it helps to automate stuff and also gives confidence not just to the coder but also to the reviewer.

Having said that, I had implemented Jest and Enzyme to set up the tests. Now as a developer I am really interested in knowing more about testing. The company which I work for, Fave (We are hiring, link at the end of this post), focuses a lot of TDD and I see where and why is it needed.

So obviously I had to go with the most popular option, Jest paired with enzyme. I still don't have any idea why did I go with that. But hey, after a damn long setup...

GOSH DARN AWESOME! 😱

I was really happy until I refactored my code right now. And ran into this bad boy.

So apparently Jest cant deal with importing images.

When you import image files, Jest tries to interpret the binary codes of the images as .js, hence runs into errors.

Did some research, found out that there is something called moduleNameMapper, that needs to be configured for things to work out.

ummmmmmmmmmm looks like too much work... NETFLIX BREAK!

2 episodes later

Alright! Let's do this!

As I already had a jest.config.json for setting up polyfills for tests and also to set up the enzyme adapter(I don't know why, but it wasn't working otherwise).

All I had to do was add

"moduleNameMapper": {
        "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
        "\\.(css|less)$": "<rootDir>/mocks/fileMock.js"
    }

Now comes to mocking the files. Created them with a simple
exports default '';...

"moduleNameMapper": {
        "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
        "\\.(css|scss)$": "<rootDir>//__mocks__/fileMock.js"
    }

Freakin SCSS... Alright, let's try it again.

This feeling right here...

Is why I am a developer.

You can check out my itsy bitsy org at https://github.com/WrippleFoss/
We are trying to build an open-source platform for something 😉 secret.
You can also join the discord channel using this link.

Fave is hiring, apply to https://careers.myfave.com/

Until next time...