Enzyme VS Sinon.JS

Probably Enzyme was the first to popularize component testing in React by doing shallow rendering and expecting some things to be there in the React component tree. Then React Testing library came and took component testing to a whole new level.

Enzyme is another popular testing utility for React. It allows you to manipulate and traverse React components' output, making it easier to write comprehensive tests.

ljharb is an extremely interesting person. There’s no doubting the positive impact he’s had on the OSS community and the work he’s done.

However, there are some things he does that are incomprehensible.

For example, Enzyme. Over three years ago this issue was opened for Enzyme on React 17: https://github.com/enzymejs/enzyme/issues/2429

Nothing moved for a while, and I think he said something along the lines of “if you want React 17 support, stop complaining and help”. So the community got involved. There are multiple PRs adding React 17 support. Many unofficial React 17 adapters. A lot of people have put a lot of work into this, ensuring compatibility, coverage etc. Yet to this day, none of them have been merged. Eg https://github.com/enzymejs/enzyme/pull/2564

Given the amount of time that has passed, and the work the community has put in, something is amiss. It feels like he’s now intentionally avoiding React 17+ support. But why? I don’t understand why someone would ask for help then ignore the help when it comes in. That isn’t much better than the swathe of rude/entitled comments he was getting on the issue before he locked it.

I ended up migrating to RTL, but this made many of my tests more complicated (especially compared to shallow rendering).

Enzyme Documentation

One way to do this is by writing tests for your React components. Tools like Jest and Enzyme make it easy to test your component's behavior, rendering output, and state changes. By writing tests for your components, you can ensure that they behave as expected and prevent issues before they reach production.

GitHub link: https://github.com/enzymejs/enzyme

So If you have experience with enzyme testing, where you might be checking the value of state once you click any button or you might be checking the prop value If something changes.

Enzyme offers two types of API for shallow rendering and full rendering. Both are preferred for different test scenarios and functionalities.

At Visa, I was writing unit tests for a Next.js project using components designed with Chakra UI. That's where React Testing Library came in handy. Unlike other solutions like Enzyme, I did not have to worry about the application snapshot but could instead focus on each UI element, its expected behaviour and the data it would render upon user interactions.

Superset uses Jest and React Testing Library (RTL) to write unit and integration tests. In the past we used Enzyme, but now that we're currently converting all of our class components to functional components, Enzyme cannot support our testing needs. Since RTL is better for testing functional components, we're converting all of our test files to RTL. This can be quite a learning curve - I've gone through a lot of the process so I'd like to share what I've learned so far.

If you are using a mocking library, such as sinon, jest-mock, or ts-mockito, make sure that it is compatible with Jest. You may need to install additional packages or configure them in your configuration file. For example, to use sinon with Jest, you can install the sinon-jest package and add the following to your configuration file:

Mocha is a test runner, Chai is an assertion library, Sinon is a mocking library, this normally the combination you would need to use if you choose mocha, but there are others.

Instead, use pure functions + dependency inject your stubs (e.g. parameter to function). Also note, no need for Sinon or some other test double library. JavaScript is so good nowadays to easily make objects/classes/functions or any combination thereof on the fly that are terse.

I've had some good experiences with Ava + Sinon. I've personally disliked Jest because it seemed to do some weird trickery in the background that prevented me from using ES modules.

🤖 You can use the Mocha testing framework with the Chai assertion library to write tests for your Express controller. You can also use the Sinon library to mock the database calls. This will allow you to test the controller without actually making a call to the database. You can also use the SuperTest library to make HTTP requests to the controller and test the response.

You can use sinon js to create a mock version of your http library (axios) that responds with the data you’re expecting.

Assertions are the checkpoints of our test block that confirm if an automated test has passed or failed. Cypress bundles the Chai, jQuery, and Sinon.JS libraries for assertions. They check the desired, expected application in which the test is running. A complete listing of assertions can be found in the documentation here.

ES module is basically a "class" that you inject dependencies into through imports. And for tests you just use something like sinon to swap module dependencies for mocks.

You can use a tool like sinon to pass in your own function instead of the real moment library. From there you can write tests that ensure moment was invoked appropriately.

Let's configure tests with mocha, chai and sinon on Typescript in a few steps.