导入前的笑话模拟脚本标签

Question

我知道直接从组件中获取文档元素不是一个好主意，无论如何，例如我导入了 SomeComponent jsx 文件，例如

import SomeComponent from '../components/SomeComponent';

export default MyComponent = () => {
  return (
    SomeComponent.test ? "Hey" : "not Hey"
  )
}

在我拥有的那个组件内部，元素是一个包含一些内容的脚本

const el = document.getElementById('element');
const json = el && el.innerText;
const info = json && JSON.parse(json);
export default test = info.someKey

MyComponent 的单元测试是这样的

describe('Tests for MyComponent', () => {
  it('should render without any problem', () => {
    wrapper = shallow(<MyComponent />);
    expect(wrapper).toExist();
  });
});

它因TypeError 失败：无法读取 null 的属性“someKey”

如何使用innerText模拟SomeComponent脚本标签

Answer 1

当我在 setupTests.js 文件上模拟它时它可以工作

const el = document.createElement('script');
el.setAttribute('id', 'el');
el.innerText = mock;
document.head.append(el);