Menu
I have a React component that I am trying to write some tests around. I have broken it down to the simplest test possible.
jest.dontMock('../Overlay.react.js');
import React from 'react';
import ReactDOM from 'react-dom';
var Overlay = require('../Overlay.react.js'); // this is the culprit!
describe('Overlay', () => {
it('should work', () => {
expect(true).toEqual(true);
});
});
When requiring the component I am trying to test, it seems to not be mocking its subcomponents. At the top of Overlay.react.js, I have the following import: import LoadingSpinner from 'loadingIndicator/LoadingIndicatorSpin.react'; When running my test, I get the following error:
- SyntaxError: /Users/dev/work/react-prototype/src/components/root/routes/components/subset1/components/Overlay.react.js: /Users/dev/work/react-prototype/src/components/root/routes/components/loadingIndicator/LoadingIndicatorSpin.react.js: /Users/dev/work/react-prototype/src/components/root/routes/components/loadingIndicator/sass/style.sass: Unexpected token ILLEGAL
It seems like instead of mocking the components, it is going right down to the sub-component's sass file and throwing a fit. My understanding was that Jest mocks everything except for what you tell it to not mock.
What is the right way to formulate these tests so that sub-components do not cause jest to explode when being imported during a test?
700
To enable us to mock useState, we use React. useState (line #5) instead of using the usual named import (i.e. import { useState } from 'react'). Below is our Jest unit test for the component. Before rendering the component for testing, we create a constant 'setStateMock' and mock it with a jest function jest.
Both Jest and Enzyme are meant to test the react applications. Jest can be used with any other Javascript framework, but Enzyme is meant to run on react only. Jest can be used without Enzyme, and snapshots can be created and tested perfectly fine. But the Enzyme adds additional functionality to it.
There are a few ways to test React components. Broadly, they divide into two categories: Rendering component trees in a simplified test environment and asserting on their output. Running a complete app in a realistic browser environment (also known as “end-to-end” tests).
In React, we can nest components inside within one another. This helps in creating more complex User Interfaces. The components that are nested inside parent components are called child components. Import and Export keywords facilitate nesting of the components.
If you would require your SASS and LESS and CSS files in the main component instead of in each sub component you would not get this problem as you test the components on their own.
There are some other solutions mentioned in this issue report if you don't like the one I provided. Issue 334
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
