“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

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).tsx the test must be inside a tests … Read more

NestJS – Test suite failed to run Cannot find module ‘src/article/article.entity’ from ‘comment/comment.entity.ts’

You can tell Jest how to resolve module paths by configuring the moduleNameMapper option, which is useful if you’re using packages like module-alias or if you’re using absolute paths. Add these lines to your Jest configuration: { // … “jest”: { // … “moduleNameMapper”: { “^src/(.*)$”: “<rootDir>/$1” } } } Now modules that start with … Read more

Jest typescript tests runs twice, one for ts files, and one for js files

Is this normal in ts-jest or am I missing some extra configuration You should set roots to /src only. Here is a good config: module.exports = { “roots”: [ “<rootDir>/src” ], “transform”: { “^.+\\.tsx?$”: “ts-jest” }, “testRegex”: “(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$”, “moduleFileExtensions”: [ “ts”, “tsx”, “json” ], } I also only test .tsx? files (no .jsx?) šŸ˜‰

Jest: Testing window.location.reload

Updated Answer (November 2021) Package: “jest”: “^26.6.0” “@testing-library/jest-dom”: “^5.11.4” Build: create-react-app 4 describe(“test window location’s reload function”, () => { const original = window.location; const reloadFn = () => { window.location.reload(); }; beforeAll(() => { Object.defineProperty(window, ‘location’, { configurable: true, value: { reload: jest.fn() }, }); }); afterAll(() => { Object.defineProperty(window, ‘location’, { configurable: true, … Read more

Testing onChange function in Jest

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

Difference between fake, spy, stub and mock of sinon library ( sinon fake vs spy vs stub vs mock )

Just for understanding purpose call: FuncInfoCollector = is a Function that records arguments, return value, the value of this(context) and exception thrown (if any) for all of its calls. (this FuncInfoCollector is dummy name given by me, it is not present in SINON lib) Fake = FuncInfoCollector + can only create a fake function. To … Read more

How to run Jest tests with coverage for one file

The solution is to add one small option –collectCoverageFrom to collect only for a certain file (i.e. component). This is based on this post NPM version npm test my-component.test — –coverage –collectCoverageFrom=src/components/my-component/my-component.tsx Notice an extra — before –coverage…. This needs to be passed for npm as following options provided will not be taken into consideration … Read more

React & Jest, how to test changing state and checking for another component

Figured it out! Did not need React Test Utilities it(‘should render the Notification component if state.error is true’, () => { const loginComponent = shallow(<Login />); loginComponent.setState({ error: true }); expect(loginComponent.find(Notification).length).toBe(1); }); This will set the state of error to true in the Login component, then check if the Login component contains the Notification component.