javascript - 在react应用程序中使用react-test-renderer和storybook执行组件测试时出错

Question

我正在做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不是函数？ 这个错误是怎么回事？您能解释一下吗？

Answer 1

您应该使用requireContext而不是require.context:

将包添加到开发依赖项:

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);