enzyme – Page 2 – Tarik Billa

Mocking react-router-dom hooks using jest is not working

September 21, 2023 by Tarik

This works for me to mock useParams and change values for each unit test within the same file: import React from “react”; import { render } from “@testing-library/react”; import Router from “react-router-dom”; import Component from “./Component”; jest.mock(“react-router-dom”, () => ({ …jest.requireActual(“react-router-dom”), useParams: jest.fn(), })); const createWrapper = () => { return render(<Cases />); }; describe(“Component … Read more

Testing react component enclosed in withRouter (preferably using jest/enzyme)

September 20, 2023 by Tarik

Normally if we try to test such components we won’t be able to render it as it is wrapped within WithRouter (WithRouter is a wrapper over a component which provides Router props like match, route and history to be directly used within the component). module.exports = withRouter(ManageProfilePage); To render such components, we have to explicitly … Read more

JS Unit testing run multiple times with different parameters

September 17, 2023 by Tarik

An alternative is to use Jest. It has this functionality built-in: test.each` a | b | expected ${1} | ${1} | ${2} ${1} | ${2} | ${3} ${2} | ${1} | ${3} `(‘returns $expected when $a is added $b’, ({a, b, expected}) => { expect(a + b).toBe(expected); });

How should I test React Hook “useEffect” making an api call with Typescript?

September 13, 2023 by Tarik

There are two issues at play here Asynchronous call to setData setData gets called in a Promise callback. As soon as a Promise resolves, any callbacks waiting for it get queued in the PromiseJobs queue. Any pending jobs in the PromiseJobs queue run after the current message has completed and before the next one begins. … Read more

Error: This method is only meant to be run on single node. 0 found instead

September 10, 2023 by Tarik

That error happens when, as it says, you run it with any number of nodes other than 1. Similar to jQuery, your find call will return some number of nodes (really it’s a single wrapper that knows how many nodes your find selector has found). And you can’t call simulate against 0 nodes! Or multiple. … Read more

How to pass context down to the Enzyme mount method to test component which includes Material UI component?

August 31, 2023 by Tarik

Try adding childContextTypes in the mount options: return mount( <SearchBar {…props} />, { context: {muiTheme}, childContextTypes: {muiTheme: React.PropTypes.object} } ); By doing it you set the Enzyme wrapper to make the muiTheme available to it’s children through the context.

Jest/Enzyme ShallowWrapper is empty when creating Snapshot

August 28, 2023 by Tarik

For jest v24 you need to use snapshot serializer like https://github.com/adriantoine/enzyme-to-json source: https://github.com/facebook/jest/issues/7802

“Navbar refers to a value, but is being used as a type here” when trying to render a shallow copy of my component when testing

August 27, 2023 by Tarik

Have you tried to change the name of the file? MyComponent.test.tsx Also, did you install the types of jest and stuff npm i -D @types/jest. I mean I’m saying this because if you look at the jest config where it says testRegex. You have it like this __tests__/*.(test|spec).txs the test must be inside a tests … Read more

TypeError: Cannot read property ‘contextTypes’ of undefined

August 27, 2023 by Tarik

This would be the same error TypeError: Cannot read property ‘contextTypes’ of undefined when you are importing something that does not exist. Here is an example: AccountFormComponent.jsx (incorrect class name): export class FoeFormComponent extends React.Component { …. } AccountFormComponent.test.jsx: import { shallow } from ‘enzyme’ import { expect, assert } from ‘chai’ import { AccountFormComponent … Read more

Testing onChange function in Jest

August 23, 2023 by Tarik

Syntax on your code snippet I think should be: import React from ‘react’; export default class InputBox extends React.Component { onSearch(event) { event.preventDefault(); this.props.onSearch(event.target.value.trim()); } render () { return (<input onChange={this.onSearch.bind(this)} />); } } The test is failing because, as same you define the preventDefault function on the event object, you also must define other … Read more