I would like to add React Testing Library to a project that uses mocha and chai for unit tests. I am a bit stumped when it comes to writing assertions, most examples make use of jest and jest-dom. I am really keen to use assertions like toBeInTheDocument or toHaveTextContent
I am wondering if there is a chai plugin that is a suitable replacement for jest-dom?
or what alternative solutions you have found for using React Testing Library with mocha and chai?
chai-dom is an alternative. It's a plugin that provides a subset of assertions on the dom. Unfortunately, the assertions are not as declarative or extensive as jest-dom.
Using chai-dom, we'd use exist in place of toBeInTheDocument and text in place of toHaveTextContent.
Related
I noticed in cypress documentation that we can use Cypress for testing components. But i did not find any info regarding using cypress to test simple javascript functions like:
function isObjectLike(value) {
return value != null && typeof value == 'object' && !Array.isArray(value);
}
In my situation i am using cypress to test Nextjs application. I test my components with unit tests and also for integration tests. So all my tests are visual tests. I want also to tests my utlis/helpers functions using unit tests. Question: Could i do this with cypress or it is not designed for what i want to do?
Conventionally Cypress was designed to run test in browser environment, and it has tools which helps this purpose. For the most time, for unit testing your functions you'd rather want to use JavaScript test runner like Jest.
However, according to Cypress documentation, there are cases when you would want to do unit tests in this framework: for example if you want to test if some property is present on your window object. See example.
Bottom line: Pure JavaScript test runners have more tools and are probably better for unit testing functions.
We have been using Enzyme for a long time to test our react components but have started the migration to React Testing Library step by step.
When trying to use the toHaveValue matcher in a RTL test it failes since the enzyme matcher with the same name is called instead. Is there a way I can "tell" a specific test file to use the matchers from jest-dom instead?
I have added both the enzyme and jest-dom matchers to my repository according to the installation docs.
The toHaveValue() assertion is provided by react-testing-library's jest-dom (https://github.com/testing-library/jest-dom#tohavevalue).
You should be able to force the jest-dom matchers (assertions) "before" whichever ones you have loaded previously (enzyme's, for example) by putting
import "#testing-library/jest-dom/extend-expect";
at the top of your test.
See also:
https://github.com/testing-library/react-testing-library/issues/379 and
https://github.com/facebook/jest/issues/6243
A similar issue:
https://github.com/testing-library/jest-dom/issues/208
I want to test something like layout using Jest and Enzyme. But Jest uses JSDOM to simulate the real browser environment.
I can only use Jest in this old project. How can I do it?
Here are some descriptions in JSDOM: https://github.com/jsdom/jsdom#unimplemented-parts-of-the-web-platform
Summarize the problem
To begin with
To build a custom React components library, I've followed this guide (Building a React Components Library). The author uses react-styleguided along with emotion for styling, but I've found myself being more prolific with SASS, which I know already.
Setup
After some research I've set Babel and Styleguided's webpack to work with SASS. However, Jest would return failed tests because of #import rules in my *.*sass files.
This blog post here (Testing React components with Jest and Enzyme) helped me to figure out how I would do it work and, after a little work, I got all functional tests so far.
The "problem"
But I'm not finding any proper documentation on "how to write styling tests for SASS". Actually, I'm not even able to understand how I could work it out, since testing components is a new thing for me. This is my first React components library.
Is there any resource I could reach to learn about it?
I was surprised that many blogs are writing unit tests for React Applications using both Jest and Enzyme.
Cant, we write unit tests for React applications by using the only jest or by the only Enzyme??
If yes, to get a component we use shallow() in enzyme but what we use in Jest?
I think you didn't fully understand the concepts of jest and enzyme.
Jest
TL;DR: Jest is just a test runner on steroids for JavaScript (not just react).
The main functionality of jest is to execute JavaScript tests. It gives you tools to organize your tests, e.g. using describe, it or test blocks. jest comes with a lot of build-in assertions (e.g. expect(actual).toBe(expected)) to help you identifying failing and succeeding tests. On top of that jest comes with additional features, for example it allows you to easily mock functions or even complete modules.
jest is not bound to react in general, but does quite well in combination with react, since it is maintained by facebook just as react itself. So it's basically almost everytime the right joice and also recommended by react.
Enzyme
TL;DR: Collection of utilities to simplify testing/rendering react components.
Technically you don't need Enzyme or any other framework to test react components (only jest). react already exposes react-dom/test-utils but it's really cumbersome to work with those without properly wrapping and simplyfing its API. And that's exactly what enzyme is doing. It basically puts a layer of abstraction over react-dom/test-utils and adds a bunch of utilities, so you don't need to worry about implementing them yourself.
I highly recommend you to look at react-testing-library, an alternative to enzyme, and read "Testing Implementation Details" blog post authored by its founder.
react-testing-library is, like jest, recommended by react.
Jest and Enzyme are not comparable.
Jest don't give you rich API/function to access dom elements like enzyme but it does other important tasks like when you hit command npm test or npm run test jest collect all the test file eg all files ending with .test.js run each test cases within these files and show the result in the console like below its jest responsibility.
Jest is a testing framework or test runner which runs all the test files in one go, enzyme is a utility or library consider this a smaller thing compare to jest it gives many functions to access dom easily like shallow, mount, find, children, etc...