"在反应应用程序中使用反应测试渲染器和故事书执行组件测试时出错"

Question

I doing the storybook tutorial<\/a> , but in the part of the tutorial when I created and ran the tests, this throws an exception indicating the following error in the file .storybook\/config.js<\/strong> :

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.

Answer 1

You should use requireContext instead of require.context :

Add the package to dev dependencies:

yarn add --dev require-context.macro

and Import it in the config and use it, your config should look like 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);

Answer 2

运行这一行： yarn add --dev require-context.macro