chai VS react-testing-library

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

These options totally depend on your requirements. For example an empty hardhat option is a very basic project sample if you need more libraries, plugins or you use Typescript later, you have to add them manually. Like @nomiclabs/hardhat-waffle , [ethereum-waffle](https://www.npmjs.com/package/ethereum-waffle), chai , @nomiclabs/hardhat-ethers , ethers , [@openzeppelin/contracts](https://www.npmjs.com/package/@openzeppelin/contracts) Because, they'll allow us to interact with Ethereum and to test our contracts.

For those of you wondering what a "Chaijs" is like I was: https://github.com/chaijs/chai

> BDD / TDD assertion framework for node.js and the browser that can be paired with any testing framework.

ES6 test setup with Mocha and Chai.

It'd be hard for me to imagine what would it be like back then to write tests if it wasn't for Enzyme. Even with Enzyme, it was noticeably harder than it is today, and I still vividly remember installing and configuring in my project Mocha, Chai, Sinon, and JSDOM, to get pretty much the same tooling that today a single library - Jest - provides out of the box, while adding numerous features on top of that.

The library offers a BDD testing style and fully exploits javascript promises - the resulting tests are simple, clear and expressive. Chakram is built on node.js, mocha, chai and request.

For this example, I am using Mocha, plus Chai for its BDD expect syntax and the chai-as-promised plugin for asynchronous matchers.

chai

React Testing Library

After searching for a workaround, I found this issue thread on the React-testing-library Github page, which gave me a clear solution.

yeeeesss and as an advice use testID in most of matcher cases. also do not rely only on detox matcher try https://github.com/testing-library/react-testing-library

React Testing Library: This library provides simple and complete React DOM testing utilities that encourage good testing practices. It helps you write tests that are more focused on the behavior of your components rather than the implementation details. https://github.com/testing-library/react-testing-library

I've had a number of issues since the upgrate to React 18, notably this one.

For more information see: - The PR implementing 'renderHook' in React Testing Library

Really? It seems like it's already been replaced. Can you link to where it's not quite deprecated yet? https://github.com/testing-library/react-testing-library/releases/tag/v13.1.0

expect(wrapper.find('FetchNextPageButton').props()).toMatchObject({ query: NEWS\_QUERY, path: "viewer.news"}) So I'm wondering what's the best approach to test it by using React testing library instead.

^ jest for running the tests & @types/jest to help with IDE auto-complete when writing tests. @testing-library/react to render components in the testing environment & test them in a way that tries to mimic how users interact with them. @testing-library/jest-dom for additional DOM-related assertions.

There are many ways to test component UIs and some testing frameworks help us achieve that, to mention but a few react-testing-library, where we write tests to check what a component has, for example, if we are testing a form component, we will write tests to check it a button is rendered, if there are input and/or select tags, etc and we usually see the results in our terminals but with React cosmos, we have a visual way to test our components (Visual TDD) which makes testing easier.