New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
jest.mock() makes module undefined when importing it no matter what we return in factory function #120
Comments
Ok I have a solution (actually my genius coworker @junseld found it). It appears to have something to do with the way Instead of this:
Do this:
I guess |
Maybe we can update the ts-jest documentation to warn users about the differences in mocking compared to ES6? |
+1000 |
+1000 |
Oh, I created a minimal repo a while ago, when I thought the problem was Jest: Sorry about not posting it sooner. |
@bhouser thanks. The tests in the typescript directory of the linked repo pass if |
@MichalCafe does this solve the issue for you as well? ^ |
20.0.6 was just published which now hoists mock calls. @MichalCafe @bhouser can you check whether this fixes your issues? |
To mock an ES6 dependency module default export using jest: Instead of:
What worked for me was:
The other options didn't work for me. |
Hey, I encounter similar issue. @adrifmonte when you do jest.mock('../src/ChildComponent'); and ChildComponent.mockImplementation(() => 'ChildComponent'); , does it show ts error saying that 'mockImplementation does not exist on type ChildComponent' . Please let me know |
@dmngu9 be sure to NOT have |
@huafu still not work for me 😢 . Also when |
@dmngu9 can you create a minimal repo with the issue? |
@huafu i used this repo https://github.com/bhouser/jestReactMockTsx. The typescript folder |
@dmngu9 almost all dependencies are way too old out there ;-) |
I made it work with this |
|
@huafu thanks but my question is to do mocking in these 2 ways: jest.mock('../src/ChildComponent'); ChildComponent.mockImplementation(() => 'ChildComponent')` `jest.mock('../src/ChildComponent', () => {
});` |
actually option 1 works for me when run jest. However on vscode, it keeps complaining mockImplementation not exist on ChildComponent even though running jest works |
I've just tried (within the repo with the changes I sent above): diff --git a/typescript/src/__mocks__/ChildComponent.tsx b/typescript/src/__mocks__/ChildComponent.tsx
new file mode 100644
index 0000000..1263b16
--- /dev/null
+++ b/typescript/src/__mocks__/ChildComponent.tsx
@@ -0,0 +1 @@
+export default jest.fn(() => 'ChildComponent')
\ No newline at end of file
diff --git a/typescript/src/__tests__/ParentComponent_test.tsx b/typescript/src/__tests__/ParentComponent_test.tsx
index 4a79a8f..12a1e2a 100644
--- a/typescript/src/__tests__/ParentComponent_test.tsx
+++ b/typescript/src/__tests__/ParentComponent_test.tsx
@@ -1,9 +1,9 @@
-jest.mock('../ChildComponent', () => 'ChildComponent');
-
import * as React from 'react';
import * as renderer from 'react-test-renderer';
import ParentComponent from "../ParentComponent";
+jest.mock('../ChildComponent');
+
test('renders correctly', () => {
const tree = renderer.create(
<ParentComponent />
diff --git a/typescript/src/__tests__/__snapshots__/ParentComponent_test.tsx.snap b/typescript/src/__tests__/__snapshots__/ParentComponent_test.tsx.snap
new file mode 100644
index 0000000..2289842
--- /dev/null
+++ b/typescript/src/__tests__/__snapshots__/ParentComponent_test.tsx.snap
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+ className="parentComponent"
+>
+ ChildComponent
+ ;
+</div>
+`; as well as: diff --git a/typescript/src/__tests__/ParentComponent_test.tsx b/typescript/src/__tests__/ParentComponent_test.tsx
index 4a79a8f..01c2b1b 100644
--- a/typescript/src/__tests__/ParentComponent_test.tsx
+++ b/typescript/src/__tests__/ParentComponent_test.tsx
@@ -1,8 +1,12 @@
-jest.mock('../ChildComponent', () => 'ChildComponent');
-
import * as React from 'react';
import * as renderer from 'react-test-renderer';
import ParentComponent from "../ParentComponent";
+import ChildComponent from '../ChildComponent';
+
+jest.mock('../ChildComponent');
+
+(ChildComponent as jest.Mock).mockImplementation(() => 'ChildComponent')
+
test('renders correctly', () => {
const tree = renderer.create( they both work |
vscode complains because the type isn't and can't be changed, see #576 |
@huafu thanks for the help. All good now. It is interesting when using jest.mock(module, factory), it differentiate between default and named import. But when using mockImplementation, it does not |
I ask to reopen this issue due to lacking documentation / warnings of this issue. The fact that That problem wouldn't be as dire if |
this worked for me: |
This is still an issue in 2022. |
Facing same issue with the |
+1 in late 2023; running into this issue while trying to mock an RTK Query Api |
./src/StatelessComponent.tsx
./src/ChildComponent.tsx
./__tests__/StatelessComponent.test.tsx
When running the test in TS,
ChildComponent
is undefined.When running the test in ES6,
ChildComponent
is defined.Can be related to this issue in Jest repo: jestjs/jest#2984
The text was updated successfully, but these errors were encountered: