I got this problem cant use Jest with ES6 but it works for me in CommonJS!
If I use standard Common JS require I can use Manual Mocking with jest so this directory is seen __mocks__ but ES6 is not working
Here is the file structure
-root
--src
---currency.js
---currency.test.js
---utils
----fetch-data.js
----__mocks__
-----fetch-data.js
So the external REST-API is in the utils/fetch-data.js So I am trying to mock this file in my currency.test.js If I use CommonJS it works and here is the code set for it
/utils/fetch.data.js
const axios = require("./axios");
// import axios from "./axios"; // <-- when I try ES6 I flip this on and comment over the CommonJS
const fetchData = async () => {
const rates = await axios.get('https://api.ratesapi.io/api/latest')
return rates
}
module.exports = fetchData;
//export default fetchData; // <-- when I try ES6 I flip this on and comment over the CommonJS
the mocking test in mocks
utils/mocks/fetch-data.js
const fetchData = jest.fn(() => {
Promise.resolve({
status: "MOCK",
data: {}
})
});
module.exports = fetchData;
// export default fetchData; // <-- when I try ES6 I flip this on and comment over the CommonJS
then inside the currency file
currency.js
// import fetchData from "./utils/fetch-data"; // <-- when I try ES6 I flip this on and comment over the CommonJS
const fetchData = require("./utils/fetch-data");
module.exports = class CurrencyComparison {
// export default class CurrencyComparison { // <- ES6 export when I want to try use ES6 I flip this on and comment the module.exports which is CommonJS
constructor(salary) {
this.salary = salary
}
fetchCurrentExchange = async () => { // <-- we are testing this as fetchData is from an API
return await fetchData().then(res => {
return [res.data.rates, res.status]
})
}
}
And now the test
currency.test.js
// import CurrencyComparison from "./currency_comparison"; // <-- when I try ES6 I flip this on and comment over the CommonJS
const CurrencyComparison = require("./currency_comparison");
// Task 10: Import and mock fetchData
const fetchData = require("./utils/fetch-data.js");
// import fetchData from "./utils/fetch-data.js"; // <-- when I try ES6 I flip this on and comment over the CommonJS
jest.mock("./utils/fetch-data.js"); // not performing properly with ES6
const testSalary = new CurrencyComparison(50000);
it("Receives current currency exchange data", async ()=>{
//arrange
const mockResponse = {
status : "Mock",
data: {
"base": "USD",
"rates": {
"CCD": 50,
},
"date": "2021-05-17"
}
}
const expectedValue = [{"CCD": 50}, "Mock"];
// Mock the resolved value of fetchData
fetchData.mockResolvedValueOnce(mockResponse); // it fails here giving the clue that the __mocks__ folder is not used as the mocking with ES6. the test works with CommonJS
//act
const actualValue = await testSalary.fetchCurrentExchange()
//assert
expect(actualValue).toEqual(expectedValue);
});
Here is how I have setted up package.json only qouting the most relevant codes!
package.json
"type": "module",
"scripts": {
"test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.23.7",
"@babel/preset-env": "^7.23.7",
"babel-jest": "^29.7.0",
"jest": "^29.7.0"
},
"jest": {
"transform": {}
},
"babel": {
"presets": [
"es2015"
]
}
I have a .babelrc as well
.babelrc
{
"presets": ["@babel/preset-env"]
}
I don’t have jest.config.js and babel.config.js
TEST RESULTS FROM ES6 ignore other test
TEST ES6
FAIL src/currency.test.js
the entire block of tests
√ Gets conversion rate for currency (4 ms)
√ Converts USD salary to hourly CAD pay (1 ms)
√ Respond with different salaries based on currency (2 ms)
× Receives current currency exchange data (1 ms)
● the entire block of tests › Receives current currency exchange data
TypeError: fetchData.mockResolvedValueOnce is not a function
84 |
85 | // Mock the resolved value of fetchData
> 86 | fetchData.mockResolvedValueOnce(mockResponse);
| ^
87 |
88 |
89 | //act
at Object.<anonymous> (src/currency_comparison.test.js:86:15)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 3 passed, 4 total
Snapshots: 0 total
Time: 0.563 s
Ran all test suites.
And here is the test result the same code but with CommonJS
TEST COMMONJS
PASS src/currency.test.js
the entire block of tests
√ Gets conversion rate for currency (2 ms)
√ Converts USD salary to hourly CAD pay
√ Respond with different salaries based on currency (1 ms)
√ Receives current currency exchange data (1 ms)
Test Suites: 1 passed, 1 total
Tests: 4 passed, 4 total
Snapshots: 0 total
Time: 0.596 s, estimated 1 s
Ran all test suites.
What am I doing wrong for mocks Manual Mocking to not workig with ES6 but works with the standard CommonJS. What am I missing in my configuration files etc?