Browse Source

Configure Jest to use mocks when importing Vue SFC dependencies

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
test-19923-vue-testing
André Jaenisch 2 months ago
parent
commit
0c54637fc0
Signed by: ryuno-ki
GPG Key ID: 5A668E771F1ED854
  1. 5
      .babelrc
  2. 5
      jest.config.js
  3. 1964
      package-lock.json
  4. 1
      package.json
  5. 9
      web_src/__mocks__/vue-calendar-heatmap.js
  6. 3
      web_src/js/__mocks__/svg.js
  7. 13
      web_src/js/components/ActivityHeatmap.test.js
  8. 8
      web_src/js/components/ContextPopup.test.js
  9. 5
      web_src/js/components/ContextPopup.vue
  10. 7
      web_src/js/testUtils/jestSetup.js

5
.babelrc

@ -1,7 +1,10 @@
{
"env": {
"test": {
"plugins": ["@babel/plugin-transform-modules-commonjs"]
"plugins": ["@babel/plugin-transform-modules-commonjs"],
"presets": [
["env", { "modules": false, "targets": { "node": "current" }}]
]
}
}
}

5
jest.config.js

@ -1,6 +1,6 @@
export default {
rootDir: 'web_src',
setupFilesAfterEnv: ['jest-extended/all'],
setupFilesAfterEnv: ['jest-extended/all', '<rootDir>/js/testUtils/jestSetup.js'],
testEnvironment: '@happy-dom/jest-environment',
testMatch: ['<rootDir>/**/*.test.js'],
testTimeout: 20000,
@ -9,6 +9,9 @@ export default {
// See https://github.com/vuejs/vue-jest#installation
'\\.vue$': '@vue/vue2-jest',
},
moduleNameMapper: {
'../svg.js': '<rootDir>/js/__mocks__/svg.js',
},
verbose: false,
};

1964
package-lock.json generated

File diff suppressed because it is too large Load Diff

1
package.json

@ -48,6 +48,7 @@
"@happy-dom/jest-environment": "4.0.1",
"@testing-library/vue": "5.8.3",
"@vue/vue2-jest": "28.0.0",
"babel-preset-env": "1.7.0",
"eslint": "8.15.0",
"eslint-plugin-html": "6.2.0",
"eslint-plugin-import": "2.26.0",

9
web_src/__mocks__/vue-calendar-heatmap.js

@ -0,0 +1,9 @@
export const CalendarHeatmap = {
directives: {},
props: {},
data: () => {},
computed: {},
methods: {},
render: () => 'div',
staticRenderFns: []
};

3
web_src/js/__mocks__/svg.js

@ -0,0 +1,3 @@
export const svg = {
SvgIcon: {},
};

13
web_src/js/components/ActivityHeatmap.test.js

@ -4,12 +4,13 @@ import {render} from '@testing-library/vue';
import ActivityHeatmap from './ActivityHeatmap.vue';
test('ActivityHeatmap', () => {
const helpers = render(ActivityHeatmap, {
const {getByText} = render(ActivityHeatmap.default, {
props: {
values: [],
}
values: [{
date: '2022-06-18',
count: 42,
}]
},
});
const {getByText} = helpers;
console.log('Component', ActivityHeatmap);
getByText('contributions in the last 12 months');
getByText(/contributions in the last 12 months/);
});

8
web_src/js/components/ContextPopup.test.js

@ -0,0 +1,8 @@
import {render} from '@testing-library/vue';
import ContextPopup from './ContextPopup.vue';
test('ContextPopup', () => {
const {getByText} = render(ContextPopup.default);
getByText(/An error occurred/);
});

5
web_src/js/components/ContextPopup.vue

@ -47,10 +47,7 @@ const luminanceThreshold = 0.179;
export default {
name: 'ContextPopup',
components: {
SvgIcon,
},
components: {SvgIcon},
data: () => ({
loading: false,

7
web_src/js/testUtils/jestSetup.js

@ -0,0 +1,7 @@
// Mock window.config for tests. Normally, these values are provided by Go.
global.window.config = {
appSubUrl: '/',
i18n: {
error_occurred: 'An error occurred'
},
};
Loading…
Cancel
Save