GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-17 05:02:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

REMOVE mock-fs and replace it with jest.mock()

Browse Source
This commit is contained in:
Norbert de Langen 2017-09-06 00:35:30 +02:00
parent 31078840df
commit 341cccad75
10 changed files with 284 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
__mocks__/fs.js Normal file
View File

@ -0,0 +1,23 @@
const fs = jest.genMockFromModule('fs');
// This is a custom function that our tests can use during setup to specify
// what the files on the "mock" filesystem should look like when any of the
// `fs` APIs are used.
let mockFiles = Object.create(null);
// eslint-disable-next-line no-underscore-dangle
function __setMockFiles(newMockFiles) {
mockFiles = newMockFiles;
}
// A custom version of `readdirSync` that reads from the special mocked out
// file list set via __setMockFiles
const readFileSync = (filePath = '') => mockFiles[filePath];
const existsSync = filePath => !!mockFiles[filePath];
// eslint-disable-next-line no-underscore-dangle
fs.__setMockFiles = __setMockFiles;
fs.readFileSync = readFileSync;
fs.existsSync = existsSync;
module.exports = fs;

1
app/react/package.json
View File

@ -74,7 +74,6 @@
},
"devDependencies": {
"babel-cli": "^6.24.1",
"mock-fs": "^4.3.0",
"nodemon": "^1.11.0",
"react": "^15.6.1",
"react-dom": "^15.6.1"

118
app/react/src/server/babel_config.test.js
View File

@ -1,6 +1,16 @@
import mock from 'mock-fs';
import loadBabelConfig from './babel_config';
// eslint-disable-next-line global-require
jest.mock('fs', () => require('../../../../__mocks__/fs'));
jest.mock('path', () => ({
resolve: () => '.babelrc',
}));
const setup = ({ files }) => {
// eslint-disable-next-line no-underscore-dangle, global-require
require('fs').__setMockFiles(files);
};
describe('babel_config', () => {
// As the 'fs' is going to be mocked, let's call require.resolve
// so the require.cache has the correct route to the file.
@ -8,9 +18,9 @@ describe('babel_config', () => {
const babelPluginReactDocgenPath = require.resolve('babel-plugin-react-docgen');
it('should return the config with the extra plugins when `plugins` is an array.', () => {
// Mock a simple `.babelrc` config file.
mock({
'.babelrc': `{
setup({
files: {
'.babelrc': `{
"presets": [
"env",
"foo-preset"
@ -19,72 +29,82 @@ describe('babel_config', () => {
"foo-plugin"
]
}`,
},
});
const config = loadBabelConfig('.foo');
expect(config.plugins).toEqual([
'foo-plugin',
[
babelPluginReactDocgenPath,
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
},
expect(config).toEqual({
babelrc: false,
plugins: [
'foo-plugin',
[
babelPluginReactDocgenPath,
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
},
],
],
]);
mock.restore();
presets: ['env', 'foo-preset'],
});
});
it('should return the config with the extra plugins when `plugins` is not an array.', () => {
// Mock a `.babelrc` config file with plugins key not being an array.
mock({
'.babelrc': `{
"presets": [
"env",
"foo-preset"
],
"plugins": "bar-plugin"
}`,
setup({
files: {
'.babelrc': `{
"presets": [
"env",
"foo-preset"
],
"plugins": "bar-plugin"
}`,
},
});
const config = loadBabelConfig('.bar');
expect(config.plugins).toEqual([
'bar-plugin',
[
babelPluginReactDocgenPath,
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
},
expect(config).toEqual({
babelrc: false,
plugins: [
'bar-plugin',
[
babelPluginReactDocgenPath,
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
},
],
],
]);
mock.restore();
presets: ['env', 'foo-preset'],
});
});
it('should return the config only with the extra plugins when `plugins` is not present.', () => {
// Mock a `.babelrc` config file with no plugins key.
mock({
'.babelrc': `{
"presets": [
"env",
"foo-preset"
]
}`,
setup({
files: {
'.babelrc': `{
"presets": [
"env",
"foo-preset"
]
}`,
},
});
const config = loadBabelConfig('.biz');
expect(config.plugins).toEqual([
[
babelPluginReactDocgenPath,
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
},
expect(config).toEqual({
babelrc: false,
plugins: [
[
babelPluginReactDocgenPath,
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
},
],
],
]);
mock.restore();
presets: ['env', 'foo-preset'],
});
});
});

87
app/react/src/server/utils.test.js
View File

@ -1,42 +1,69 @@
import mock from 'mock-fs';
import { getPreviewHeadHtml } from './utils';
import { getPreviewHeadHtml, getManagerHeadHtml } from './utils';
const HEAD_HTML_CONTENTS = '<script>console.log("custom script!");</script>';
// eslint-disable-next-line global-require
jest.mock('fs', () => require('../../../../__mocks__/fs'));
jest.mock('path', () => ({
resolve: (a, p) => p,
}));
describe('server.getPreviewHeadHtml', () => {
describe('when .storybook/head.html does not exist', () => {
beforeEach(() => {
mock({
config: {},
});
const setup = ({ files }) => {
// eslint-disable-next-line no-underscore-dangle, global-require
require('fs').__setMockFiles(files);
};
const HEAD_HTML_CONTENTS = 'UNITTEST_HEAD_HTML_CONTENTS';
describe('getPreviewHeadHtml', () => {
it('returns an empty string without head.html present', () => {
setup({
files: {},
});
afterEach(() => {
mock.restore();
});
it('return an empty string', () => {
const result = getPreviewHeadHtml('./config');
expect(result).toEqual('');
});
const result = getPreviewHeadHtml('first');
expect(result).toEqual('');
});
describe('when .storybook/head.html exists', () => {
beforeEach(() => {
mock({
config: {
'head.html': HEAD_HTML_CONTENTS,
},
});
it('return contents of head.html when present', () => {
setup({
files: {
'head.html': HEAD_HTML_CONTENTS,
},
});
afterEach(() => {
mock.restore();
const result = getPreviewHeadHtml('second');
expect(result).toEqual(HEAD_HTML_CONTENTS);
});
it('returns contents of preview-head.html when present', () => {
setup({
files: {
'preview-head.html': HEAD_HTML_CONTENTS,
},
});
it('return the contents of the file', () => {
const result = getPreviewHeadHtml('./config');
expect(result).toEqual(HEAD_HTML_CONTENTS);
});
const result = getPreviewHeadHtml('second');
expect(result).toEqual(HEAD_HTML_CONTENTS);
});
});
describe('getManagerHeadHtml', () => {
it('returns an empty string without manager-head.html present', () => {
setup({
files: {},
});
const result = getManagerHeadHtml('first');
expect(result).toEqual('');
});
it('returns contents of manager-head.html when present', () => {
setup({
files: {
'manager-head.html': HEAD_HTML_CONTENTS,
},
});
const result = getManagerHeadHtml('second');
expect(result).toEqual(HEAD_HTML_CONTENTS);
});
});

1
app/vue/package.json
View File

@ -78,7 +78,6 @@
},
"devDependencies": {
"babel-cli": "^6.24.1",
"mock-fs": "^4.3.0",
"nodemon": "^1.11.0"
}
}

118
app/vue/src/server/babel_config.test.js
View File

@ -1,6 +1,16 @@
import mock from 'mock-fs';
import loadBabelConfig from './babel_config';
// eslint-disable-next-line global-require
jest.mock('fs', () => require('../../../../__mocks__/fs'));
jest.mock('path', () => ({
resolve: () => '.babelrc',
}));
const setup = ({ files }) => {
// eslint-disable-next-line no-underscore-dangle, global-require
require('fs').__setMockFiles(files);
};
describe('babel_config', () => {
// As the 'fs' is going to be mocked, let's call require.resolve
// so the require.cache has the correct route to the file.
@ -8,9 +18,9 @@ describe('babel_config', () => {
const babelPluginReactDocgenPath = require.resolve('babel-plugin-react-docgen');
it('should return the config with the extra plugins when `plugins` is an array.', () => {
// Mock a simple `.babelrc` config file.
mock({
'.babelrc': `{
setup({
files: {
'.babelrc': `{
"presets": [
"env",
"foo-preset"
@ -19,72 +29,82 @@ describe('babel_config', () => {
"foo-plugin"
]
}`,
},
});
const config = loadBabelConfig('.foo');
expect(config.plugins).toEqual([
'foo-plugin',
[
babelPluginReactDocgenPath,
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
},
expect(config).toEqual({
babelrc: false,
plugins: [
'foo-plugin',
[
babelPluginReactDocgenPath,
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
},
],
],
]);
mock.restore();
presets: ['env', 'foo-preset'],
});
});
it('should return the config with the extra plugins when `plugins` is not an array.', () => {
// Mock a `.babelrc` config file with plugins key not being an array.
mock({
'.babelrc': `{
"presets": [
"env",
"foo-preset"
],
"plugins": "bar-plugin"
}`,
setup({
files: {
'.babelrc': `{
"presets": [
"env",
"foo-preset"
],
"plugins": "bar-plugin"
}`,
},
});
const config = loadBabelConfig('.bar');
expect(config.plugins).toEqual([
'bar-plugin',
[
babelPluginReactDocgenPath,
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
},
expect(config).toEqual({
babelrc: false,
plugins: [
'bar-plugin',
[
babelPluginReactDocgenPath,
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
},
],
],
]);
mock.restore();
presets: ['env', 'foo-preset'],
});
});
it('should return the config only with the extra plugins when `plugins` is not present.', () => {
// Mock a `.babelrc` config file with no plugins key.
mock({
'.babelrc': `{
"presets": [
"env",
"foo-preset"
]
}`,
setup({
files: {
'.babelrc': `{
"presets": [
"env",
"foo-preset"
]
}`,
},
});
const config = loadBabelConfig('.biz');
expect(config.plugins).toEqual([
[
babelPluginReactDocgenPath,
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
},
expect(config).toEqual({
babelrc: false,
plugins: [
[
babelPluginReactDocgenPath,
{
DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES',
},
],
],
]);
mock.restore();
presets: ['env', 'foo-preset'],
});
});
});

87
app/vue/src/server/utils.test.js
View File

@ -1,42 +1,69 @@
import mock from 'mock-fs';
import { getPreviewHeadHtml } from './utils';
import { getPreviewHeadHtml, getManagerHeadHtml } from './utils';
const HEAD_HTML_CONTENTS = '<script>console.log("custom script!");</script>';
// eslint-disable-next-line global-require
jest.mock('fs', () => require('../../../../__mocks__/fs'));
jest.mock('path', () => ({
resolve: (a, p) => p,
}));
describe('server.getPreviewHeadHtml', () => {
describe('when .storybook/head.html does not exist', () => {
beforeEach(() => {
mock({
config: {},
});
const setup = ({ files }) => {
// eslint-disable-next-line no-underscore-dangle, global-require
require('fs').__setMockFiles(files);
};
const HEAD_HTML_CONTENTS = 'UNITTEST_HEAD_HTML_CONTENTS';
describe('getPreviewHeadHtml', () => {
it('returns an empty string without head.html present', () => {
setup({
files: {},
});
afterEach(() => {
mock.restore();
});
it('return an empty string', () => {
const result = getPreviewHeadHtml('./config');
expect(result).toEqual('');
});
const result = getPreviewHeadHtml('first');
expect(result).toEqual('');
});
describe('when .storybook/head.html exists', () => {
beforeEach(() => {
mock({
config: {
'head.html': HEAD_HTML_CONTENTS,
},
});
it('return contents of head.html when present', () => {
setup({
files: {
'head.html': HEAD_HTML_CONTENTS,
},
});
afterEach(() => {
mock.restore();
const result = getPreviewHeadHtml('second');
expect(result).toEqual(HEAD_HTML_CONTENTS);
});
it('returns contents of preview-head.html when present', () => {
setup({
files: {
'preview-head.html': HEAD_HTML_CONTENTS,
},
});
it('return the contents of the file', () => {
const result = getPreviewHeadHtml('./config');
expect(result).toEqual(HEAD_HTML_CONTENTS);
});
const result = getPreviewHeadHtml('second');
expect(result).toEqual(HEAD_HTML_CONTENTS);
});
});
describe('getManagerHeadHtml', () => {
it('returns an empty string without manager-head.html present', () => {
setup({
files: {},
});
const result = getManagerHeadHtml('first');
expect(result).toEqual('');
});
it('returns contents of manager-head.html when present', () => {
setup({
files: {
'manager-head.html': HEAD_HTML_CONTENTS,
},
});
const result = getManagerHeadHtml('second');
expect(result).toEqual(HEAD_HTML_CONTENTS);
});
});

6
examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
View File

@ -2654,9 +2654,9 @@ exports[`Storyshots WithEvents Logger 1`] = `
Object {
"color": "rgb(51, 51, 51)",
"fontFamily": "
-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
\\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
",
-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
\\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
",
"padding": 20,
}
}

4
examples/react-native-vanilla/package.json
View File

@ -13,9 +13,9 @@
"react-native": "0.44.1"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-jest": "21.0.0",
"babel-preset-react-native": "1.9.2",
"jest": "^20.0.4",
"jest": "^21.0.1",
"react-test-renderer": "16.0.0-alpha.6",
"@storybook/addon-actions": "file:../../packs/storybook-addon-actions.tgz",
"@storybook/addon-links": "file:../../packs/storybook-addon-links.tgz",

9
package.json
View File

@ -48,7 +48,7 @@
"eslint-config-airbnb": "^15.1.0",
"eslint-config-prettier": "^2.3.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jest": "^20.0.3",
"eslint-plugin-jest": "^21.0.0",
"eslint-plugin-json": "^1.2.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-prettier": "^2.1.2",
@ -56,11 +56,11 @@
"fs-extra": "^4.0.0",
"gh-pages": "^1.0.0",
"github-release-from-changelog": "^1.2.1",
"inquirer": "^3.1.0",
"glob": "^7.1.2",
"husky": "^0.14.3",
"inquirer": "^3.1.0",
"jest": "^21.0.1",
"jest-enzyme": "^3.6.1",
"jest-enzyme": "^3.8.1",
"lerna": "2.1.2",
"lint-staged": "^4.0.2",
"lodash": "^4.17.4",
@ -101,8 +101,7 @@
"git add"
]
},
"verbose": true,
"concurrent": false
"verbose": true
},
"pr-log": {
"skipLabels": [