我正在做storybook tutorial,但是在创建和运行测试的教程部分中,这会引发异常,指示文件.storybook / config.js中出现以下错误:
记录错误
react-scripts test
FAIL src/storybook.test.js
Test suite failed to run
TypeError: require.context is not a function
2 | import "../src/index.css";
3 |
> 4 | const req = require.context("../src", true, /\.stories.js$/);
| ^
5 |
6 | function loadStories() {
7 | req.keys().forEach(filename => req(filename));
at Object.context (.storybook/config.js:4:21)
at configure (node_modules/@storybook/addon-storyshots/dist/frameworks/configure.js:38:11)
at Object.load (node_modules/@storybook/addon-storyshots/dist/frameworks/react/loader.js:26:26)
at loadFramework (node_modules/@storybook/addon-storyshots/dist/frameworks/frameworkLoader.js:31:17)
at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/api/index.js:53:36)
at Object.<anonymous> (src/storybook.test.js:2:1)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 6.812s
Ran all test suites related to changed files.
我的组件任务
Task.js
import React from "react";
import PropTypes from "prop-types";
function Task({ task: { id, title, state }, onArchiveTask, onPinTask }) {
return (
<div className={`list-item ${state}`}>
<label className="checkbox">
<input
type="checkbox"
defaultChecked={state === "TASK_ARCHIVED"}
disabled={true}
name="checked"
/>
<span className="checkbox-custom" onClick={() => onArchiveTask(id)} />
</label>
<div className="title">
<input
type="text"
value={title}
readOnly={true}
placeholder="Input title"
/>
</div>
<div className="actions" onClick={event => event.stopPropagation()}>
{state !== "TASK_ARCHIVED" && (
<label onClick={() => onPinTask(id)}>
<span className={`icon-star`} />
</label>
)}
</div>
</div>
);
}
Task.propTypes = {
task: PropTypes.shape({
id: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
state: PropTypes.string.isRequired
}),
onArchiveTask: PropTypes.func,
onPinTask: PropTypes.func
};
export default Task;
这是我组件任务中的故事
Task.stories.js
import React from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import Task from "./Task";
export function createTask(attrs) {
return {
id: Math.round(Math.random() * 1000000).toString(),
title: "Test Task",
state: "TASK_INBOX",
updatedAt: Date.now(),
...attrs
};
}
export const actions = {
onPinTask: action("onPinTask"),
onArchiveTask: action("acArchiveTask")
};
storiesOf("Task", module) //
.add("default", () => (
<Task task={createTask({ state: "TASK_INBOX" })} {...actions} />
)) //
.add("pinned", () => (
<Task task={createTask({ state: "TASK_PINNED" })} {...actions} />
)) //
.add("archived", () => (
<Task task={createTask({ state: "TASK_ARCHIVED" })} {...actions} />
));
storybook.test.js
import initStoryshots from "@storybook/addon-storyshots";
initStoryshots();
故事书配置文件
.storybook / config.js
import { configure } from "@storybook/react";
import "../src/index.css";
const req = require.context("../src", true, /\.stories.js$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);
.storybook / addons.js
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
为什么它指示require.context不是函数?
此错误发生了什么,您能否进一步解释?
最佳答案
您应该使用requireContext
而不是require.context
:
将包添加到dev依赖项:
yarn add --dev require-context.macro
并将其导入配置并使用它,您的配置应类似于gthis:
import { configure } from "@storybook/react";
import requireContext from 'require-context.macro';
import "../src/index.css";
const req = requireContext('../src', true, /\.stories\.js$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);